<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
<TITLE>HTML Example</TITLE>
<link rel="stylesheet" type="text/css" href="./test.css" id="thecss">
<script type="text/javascript" src="../../scripts/csschange.js"></script>
</HEAD>
<BODY onload="readSS()">
<h1 align="center" style="color: #33cccc;"><span class="pagetitle">HTML Emulation of CSS Example</span><br>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a
href="../../misc/email.htm">Brian Wilson</a> =</font></h1>
<div align="center">
<table border=3 cellpadding=5 cellspacing=0>
<tr>
<td>  <font size=2><a href="../index.html">Main Index</a> |
<a href="../propindex/font.htm">Property Index</a> |
<a href="../supportkey/syntax.htm">CSS Support History</a> |
<a href="../../history/browsers.htm">Browser History</a></font>  </td>
</tr>
</table>
<a href="#example" style="color: #ffc0cb;">Example</a> | <a href="#analysis">Analysis</a>
</div>
<br><br>
<a name="example"></a>
<big><b class="mainheading">Example</b></big>
<ol>
<li>      <<b class="tagname">html</b>>
<li>      <<b class="tagname">head</b>>
<li>      
      <<b class="tagname">title</b>>Document
Title</<b class="tagname">title</b>>
<li>      </<b class="tagname">head</b>><br><br>
<li><a name="e5" href="#a2"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
<<b class="tagname">body</b>
<span class="tagattrib">BGCOLOR</span>="#000000"
<span class="tagattrib">TEXT</span>="#80c0c0"
<span class="tagattrib">LINK</span>="#ff8080"
<span class="tagattrib">VLINK</span>="#ff0000"
<span class="tagattrib">ALINK</span>="#a05050">
<li><a name="e6" href="#a3"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
<<b class="tagname">div</b>
<span class="tagattrib">ALIGN</span>="center"><br>
<li><a name="e7" href="#a4"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
<<b class="tagname">table</b> <span
class="tagattrib">BGCOLOR</span>="#000080" <span class="tagattrib">BORDER</span>=3
<span class="tagattrib">BORDERCOLOR</span>="#0000ff"><<b
class="tagname">tr</b>><br>
<li><a name="e8" href="#a5"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
       
<<b class="tagname">td</b>><<b class="tagname">h1</b>><<b
class="tagname">font</b> <span class="tagattrib">FACE</span>="courier"
<span class="tagattrib">SIZE</span>=6><<b class="tagname">font</b>
<span class="tagattrib">SIZE</span>=7>W</<b class="tagname">font</b>>ELCOME
TO MY HOME PAGE!</<b class="tagname">font</b>></<b
class="tagname">h1</b>></<b class="tagname">td</b>><br>
<li>       </<b class="tagname">tr</b>></<b
class="tagname">table</b>><br>
<li>       </<b class="tagname">div</b>>
<li>      <<b class="tagname">br</b>><<b
class="tagname">br</b>>
<li><a name="e12" href="#a6"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
<<b class="tagname">p</b>>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hi
there! If you are reading this then you have found my home page!
Congratulations! I know it can be hard to find my pages, but I
bet that you feel lucky now. Now that you are here, please take a look at my page
of links to <<b class="tagname">a</b>
<span class="tagattrib">HREF</span>="http://www.mysite.com/coolsites.html">cool
sites</<b class="tagname">a</b>> or sign my
<<b class="tagname">a</b>
<span class="tagattrib">HREF</span>="http://www.mysite.com/guestbook.html">guest
book</<b class="tagname">a</b>></<b class="tagname">p</b>>
<li><a name="e13" href="#a7"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
<<b class="tagname">div</b>>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<<b class="tagname">b</b>><<b
class="tagname">font</b> <span class="tagattrib">SIZE</span>=6
<span class="tagattrib">COLOR</span>="#ffffff">M</<b class="tagname">font</b>>y
wonderful poetry</<b class="tagname">b</b>> is available if you are
REALLY bored. Why not give it a spin?</<b class="tagname">div</b>>
<br><br>
<li><a name="e14" href="#a8"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
<<b class="tagname">h2</b>><<b class="tagname">font</b>
<span class="tagattrib">SIZE</span>=7 <span class="tagattrib">COLOR</span>="#00ff00">
The Best Poetry I <<b class="tagname">em</b>><<b
class="tagname">b</b>>NEVER</<b class="tagname">b</b>></<b
class="tagname">em</b>> Wrote</<b class="tagname">font</b>></<b
class="tagname">h2</b>>
<li>      <<b class="tagname">ul</b>>
<li><a name="e16" href="#a9"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    <<b class="tagname">li</b>>'There Once
Was A Man From Nantucket' - <<b class="tagname">font</b>
<span class="tagattrib">FACE</span>="'comic sans ms', fantasy"
<span class="tagattrib">COLOR</span>="#ffff00">Anonymous</<b
class="tagname">font</b>></<b class="tagname">li</b>>
<li><a name="e17" href="#a9"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    <<b class="tagname">li</b>>'Cool In Fur' -
<<b class="tagname">font</b> <span class="tagattrib">FACE</span>="'comic
sans ms', fantasy" <span class="tagattrib">COLOR</span>="#ffff00">Harry
B. Foot</<b class="tagname">font</b>></<b class="tagname">li</b>>
<li>          
<<b class="tagname">li</b>>And My All Time Fave:
<li>          
<<b class="tagname">ul</b>>
<li><a name="e20" href="#a10"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
        
<<b class="tagname">li</b>><<b class="tagname">font</b>
<span class="tagattrib">SIZE</span>=6><<b class="tagname">i</b>>
'A Toast To My Toaster' - <br>
<li><a name="e21" href="#a9"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
      
         <<b class="tagname">font</b>
<span class="tagattrib">FACE</span>="'comic sans ms', fantasy"
<span class="tagattrib">COLOR</span>="#ffff00">Me!</<b
class="tagname">font</b>></<b class="tagname">i</b>></<b
class="tagname">font</b>></<b class="tagname">li</b>>
<li>          
</<b class="tagname">ul</b>>
<li>      </<b class="tagname">li</b>></<b class="tagname">ul</b>>
<br><br>
<li><a name="e24" href="#a11"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
<<b class="tagname">table</b> <span
class="tagattrib">BGCOLOR</span>="#000080"><<b class="tagname">tr</b>>
<li><a name="e25" href="#a12"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
     <<b class="tagname">td</b>
<span class="tagattrib">WIDTH</span>=50>&nbsp;</<b class="tagname">td</b>>
<li><a name="e26" href="#a13"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
     <<b
class="tagname">td</b>><<b class="tagname">font</b>
<span class="tagattrib">COLOR</span>="#00ff00">Brought to you by the letter
<li><a name="e27" href="#a14"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
        <<b class="tagname">font</b>
<span class="tagattrib">FACE</span>="'comic sans ms', fantasy"
<span class="tagattrib">COLOR</span>="#ffff00">&quot;H&quot;</<b
class="tagname">font</b>> and <<b class="tagname">u</b>>Joe Shmoe</<b
class="tagname">u</b>></<b class="tagname">font</b>></<b
class="tagname">td</b>>
<li>       </<b class="tagname">tr</b>></<b
class="tagname">table</b>>
<br><br>
<li><a name="e29" href="#a15"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
<<b class="tagname">div</b>><<b
class="tagname">b</b>>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<b
class="tagname">font</b> <span class="tagattrib">SIZE</span>=6
<span class="tagattrib">COLOR</span>="#ffffff">W</<b
class="tagname">font</b>>hen you are done looking through these
masterpieces, I encourage you to visit my proud sponsor!!
</<b class="tagname">b</b>></<b class="tagname">div</b>>
<br><br>
<li><a name="e30" href="#a16"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
<<b class="tagname">table</b> <span
class="tagattrib">BGCOLOR</span>="#ffffff" <span class="tagattrib">BORDER</span>=2
<span class="tagattrib">BORDERCOLOR</span>="#0000ff"><<b
class="tagname">tr</b>>
<li><a name="e31" href="#a17"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
     <<b class="tagname">td</b>
<span class="tagattrib">WIDTH</span>=5>&nbsp;</<b class="tagname">td</b>>
<li><a name="e32" href="#a18"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
     <<b
class="tagname">td</b>><<b class="tagname">font</b>
<span class="tagattrib">SIZE</span>=6>ADVERTISEMENT</<b
class="tagname">font</b>> Buy Navel Lint Contemplator! Its a browser and
its a sandwich spread! Go to our <<b class="tagname">a</b>
<span class="tagattrib">HREF</span>="http://www.navellint.com">home
page</<b class="tagname">a</b>> without delay! Why? Because shelf
life is only 8 hours unless refrigerated. We know that makes it hard to browse,
but it promotes frequent upgrading to the latest and greatest version.
</<b class="tagname">td</b>>
<li>       </<b class="tagname">tr</b>></<b
class="tagname">table</b>>
<br><br>
<li><a name="e34" href="#a19"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
<<b class="tagname">h6</b>><<b class="tagname">font</b>
<span class="tagattrib">SIZE</span>=1 <span class="tagattrib">COLOR</span>="#ff0000">All
standard disclaimers apply. Your life depends on NOT copying this document in
any way. This tape will <<b class="tagname">a</b>
<span class="tagattrib">HREF</span>="http://www.mysite.com/selfdestruct.html">self
destruct</<b class="tagname">a</b>> in 10
seconds...</<b class="tagname">font</b>></<b class="tagname">h6</b>>
<br><br>
<li>      </<b class="tagname">body</b>>
<li>      </<b class="tagname">html</b>>
</ol>
<br><br>
<a name="analysis"></a>
<big><b class="mainheading">Analysis</b></big>
<ul>
<li><a name="a1"></a><b class="alert">Line:</b> General<br>
<b class="alert2">CSS Properties/Issues:</b> NA<br>
<b class="alert2">Description:</b> We lose a lot here when we attempt
to kludge CSS behavior with normal HTML. Most of the attempted solutions use FONT
elements for text formatting and TABLE elements for layout control - with varying degrees
of success. When using plain HTML, at some point you need to recognize that its
display control REALLY is small compared to CSS.
<li><a name="a2"></a><b class="alert">Line:</b> <a href="#e5">5</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/colorbg/bg.htm">background</a>,
<a href="../properties/colorbg/color.htm">color</a>,
<a href="../syntax/pseudo/pseudoclass.htm">Pseudo-classes</a><br>
<b class="alert2">Description:</b> We are using BODY element attributes
to control hyperlink behavior and text/background appearance for the entire
document. The lack of state dependent anchor pseudo-classes in HTML makes
it difficult to create hyperlinks of varying appearance.
<li><a name="a3"></a><b class="alert">Line:</b> <a href="#e6">6</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/colorbg/bg.htm">background</a>,
<a href="../properties/font/font.htm">font</a>,
<a href="../properties/font/fontvariant.htm">font-variant</a>,
<a href="../properties/border/border.htm">border</a><br>
<b class="alert2">Description:</b> In the CSS examples we only use an
H1 in this location. Because we are attempting to create a border on this
content, we must resort to using a TABLE structure. The original H1 element was centered,
so we encapsulate the TABLE in a center-aligned DIV element.
<li><a name="a4"></a><b class="alert">Line:</b> <a href="#e7">7</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/colorbg/bg.htm">background</a>,
<a href="../properties/font/font.htm">font</a>,
<a href="../properties/font/fontvariant.htm">font-variant</a>,
<a href="../properties/border/border.htm">border</a><br>
<b class="alert2">Description:</b> The opening TABLE tag here uses
attributes to partially create the border and background effects used in
the original CSS example. An arbitrary border pixel thickness is used here
(keyword values not supported) while the 'dashed' border behavior in the
CSS version is not possible. Problem: The solution of using the BORDERCOLOR
attribute of the TABLE element has limited browser support.
<li><a name="a5"></a><b class="alert">Line:</b> <a href="#e8">8</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/colorbg/bg.htm">background</a>,
<a href="../properties/font/font.htm">font</a>,
<a href="../properties/font/fontvariant.htm">font-variant</a>,
<a href="../properties/border/border.htm">border</a>,
<a href="../syntax/pseudo/pseudoelement.htm">Pseudo-elements</a><br>
<b class="alert2">Description:</b> We are able to simulate the
'font-variant' and 'font-size' properties with simple HTML. Small caps is
achieved by varying the font size on already capitalized text. The 'line-height'
portion of the 'font' property is not controllable in HTML. Notice we are
able to retain the <H1> heading level of the content here.
<li><a name="a6"></a><b class="alert">Line:</b> <a href="#e12">12</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/margin/marginleft.htm">margin-left</a>,
<a href="../syntax/pseudo/pseudoelement.htm">Pseudo-elements</a><br>
<b class="alert2">Description:</b> The CSS version of this P element
gives a 'margin-left' value to the first line. This can be simulated fairly
easily in HTML using multiple non-breaking spaces (&nbsp; or &#160;)
This is a fairly portable and safe solution.
<li><a name="a7"></a><b class="alert">Line:</b> <a href="#e13">13</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/font/fontweight.htm">font-weight</a>,
<a href="../properties/margin/marginleft.htm">margin-left</a>,
<a href="../properties/font/fontsize.htm">font-size</a>,
<a href="../properties/colorbg/color.htm">color</a>,
<a href="../syntax/pseudo/pseudoelement.htm">Pseudo-elements</a><br>
<b class="alert2">Description:</b> The original CSS examples for
this section employ 'first-line' and 'first-letter' pseudo-elements. The
first-letter portion can be manually determined, but the first line is
harder to pin down unless explicitly stated. Our 'font-weight' and 'margin-left' properties used
for the first line have fair equivalents in HTML: the <b> element and
non-breaking spaces (see previous analysis point.) HTML only has an on/off
toggle for applying bold to text, so we are lucky that the original case
only used this method as well. The styling on the first-letter is again achieved
through attributes to the FONT element.
<li><a name="a8"></a><b class="alert">Line:</b> <a href="#e14">14</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/colorbg/bg.htm">background</a>,
<a href="../properties/colorbg/color.htm">color</a>,
<a href="../properties/dimension/lineheight.htm">line-height</a>,
<a href="../properties/font/fontsize.htm">font-size</a>,
<a href="../properties/font/fontweight.htm">font-weight</a>,
<a href="../syntax/selectors/element.htm#descendent">Contextual Selectors</a><br>
<b class="alert2">Description:</b> The original CSS phrase for the H2 element
is not easy to duplicate in HTML. Line-height and backgrounds for regular elements
are not controllable in HTML, while the explicit font-size originally used can
only be approximated with the FONT element (which is also used to create the text
coloring here.) The nested EM element uses the font-weight property. As mentioned
in the previous analysis point, HTML only has one bold setting, not the 9 that
are possible under CSS. We use <B> here, and while this gradient range is
not as rich as what CSS allows, it gives enough visual distinction from
surrounding content to be satisfactory.
<li><a name="a9"></a><b class="alert">Line:</b> <a href="#e16">16</a> /
<a href="#e17">17</a> / <a href="#e21">21</a> / <a href="#e27">27</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/font/fontfamily.htm">font-family</a>,
<a href="../properties/colorbg/color.htm">color</a><br>
<b class="alert2">Description:</b> We are lucky in these examples
that the only properties originally used control text color and font family,
because they are easily controlled currently with the FONT element in HTML.
<li><a name="a10"></a><b class="alert">Line:</b> <a href="#e20">20</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/font/fontsize.htm">font-size</a>,
<a href="../properties/font/fontstyle.htm">font-style</a><br>
<b class="alert2">Description:</b> Again we lucked out in regards to the
original example. The original case used the 'font-size' and 'font-style'
properties with values that are easily converted to HTML. These properties,
as well as most of the others, allow other values that are not as easily
converted to plain HTML. This is where the real power of CSS over HTML
for specifying layout information becomes apparent.
<li><a name="a11"></a><b class="alert">Line:</b> <a href="#e24">24</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/colorbg/bg.htm">background</a><br>
<b class="alert2">Description:</b> We again resort to the use of tables
to achieve the desired layout characteristics here. The original container
in the CSS examples was the BLOCKQUOTE element, which we lose here in order to create the desired
formatting. This is THE most frequent tradeoff when using HTML to layout
content - loss of structural meaning. Using tables we DO achieve, however,
the ability to manipulate background colors, borders and a small degree of
margin control.
<li><a name="a12"></a><b class="alert">Line:</b> <a href="#e25">25</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/margin/marginleft.htm">margin-left</a><br>
<b class="alert2">Description:</b> Here we use an initial table cell
in the row to create a fixed-width left margin of 50 pixels. Our original
unit measure was centimeters, so the value used is approximate only.
<li><a name="a13"></a><b class="alert">Line:</b> <a href="#e26">26</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/colorbg/color.htm">color</a><br>
<b class="alert2">Description:</b> We assign the text color information
for the original BLOCKQUOTE element here at the cell level using the FONT element.
<li><a name="a14"></a><b class="alert">Line:</b> <a href="#e27">27</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/font/fontfamily.htm">font-family</a>,
<a href="../properties/colorbg/color.htm">color</a>,
<a href="../properties/padding/padding.htm">padding</a>,
<a href="../properties/border/border.htm">border</a><br>
<b class="alert2">Description:</b> Our original CSS version contains
complex padding and border properties to the 'Joe Shmoe' text section. Neither
of these properties are fully possible with ordinary HTML even when resorting
to complex table structures. Rather than make the document even more complex,
we settle for a simple underlining effect.
<li><a name="a15"></a><b class="alert">Line:</b> <a href="#e29">29</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/colorbg/bg.htm">background</a>,
<a href="../properties/font/fontweight.htm">font-weight</a>,
<a href="../properties/margin/marginleft.htm">margin-left</a>,
<a href="../properties/font/fontsize.htm">font-size</a>,
<a href="../properties/colorbg/color.htm">color</a><br>
<b class="alert2">Description:</b> Originally we had a background on
this element in the CSS version, but that is not possible with HTML. We
ignore it in this case. We do have the advantage again of being able to kludge
'first-letter' property effects using the FONT element, and our 'margin-left'
and 'font-weight' properties similarly degrade nicely to non-breaking spaces
and <B> elements respectively.
<li><a name="a16"></a><b class="alert">Line:</b> <a href="#e30">30</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/border/border.htm">border</a>,
<a href="../properties/colorbg/bg.htm">background</a><br>
<b class="alert2">Description:</b> We go back to the well again with
the over-used solution of HTML tables to create equivalent display effects.
This time we are not so lucky. Many of the original properties used do not
degrade well to HTML layout attempts. Our original example had numerous display
properties assigned to the P element, but we are going to lose some: font line-height
and generic font names disappear. Precise four-side margin control is also out.
We also lose element background image placement and positioning too. What we end
up salvaging is the border-style, -size and -color behaviors at the TABLE level.
<li><a name="a17"></a><b class="alert">Line:</b> <a href="#e31">31</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/margin/margin.htm">margin</a><br>
<b class="alert2">Description:</b> We use the initial cell of the row
to again create a left margin effect. Fortunately, the units originally used
and those possible with HTML are compatible in this example.
<li><a name="a18"></a><b class="alert">Line:</b> <a href="#e32">32</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/font/font.htm">font</a>,
<a href="../properties/font/fontvariant.htm">font-variant</a><br>
<b class="alert2">Description:</b> Our 'ADVERTISEMENT:' banner
originally had many additional style property assignments (font, font-variant,
border), most of which can not be achieved using ordinary HTML. We resort
to just making the text big in this case.
<li><a name="a19"></a><b class="alert">Line:</b> <a href="#e34">34</a><br>
<b class="alert2">CSS Properties/Issues:</b>
<a href="../properties/font/fontsize.htm">font-size</a>,
<a href="../properties/colorbg/color.htm">color</a><br>
<b class="alert2">Description:</b> FONT attributes are used here as in
many of the other parts of this example to achieve equivalent display
characteristics of the original CSS properties.
</ul>
<br>
<a href="../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>
</body>
</html>
