defaria.com/blogs/Status/archives/000634.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   2    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
   4 <head>
   5    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6    <meta name="generator" content="Movable Type 5.2.3" />
   7
   8    <link rel="stylesheet" href="http://defaria.com/blogs/Status/styles-site.css" type="text/css" />
   9    <link rel="alternate" type="application/atom+xml" title="Atom" href="http://defaria.com/blogs/Status/atom.xml" />
  10    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://defaria.com/blogs/Status/index.xml" />
  11
  12    <title>Status for Andrew DeFaria: Why MS Word is a bad HTML editor</title>
  13
  14    <link rel="start" href="http://defaria.com/blogs/Status/" title="Home" />
  15    <link rel="prev" href="http://defaria.com/blogs/Status/archives/000633.html" title="Turning on HTML for Exchange/IMAP" />
  16    <link rel="next" href="http://defaria.com/blogs/Status/archives/000636.html" title="GPDB Enhancements/Fixes" />
  17
  18    <!--
  19 <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  20          xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
  21          xmlns:dc="http://purl.org/dc/elements/1.1/">
  22 <rdf:Description
  23     rdf:about="http://defaria.com/blogs/Status/archives/000634.html"
  24     trackback:ping="http://defaria.com/mt/mt-tb.cgi/23"
  25     dc:title="Why MS Word is a bad HTML editor"
  26     dc:identifier="http://defaria.com/blogs/Status/archives/000634.html"
  27     dc:subject="Texas Instruments"
  28     dc:description=" Described a little bit about why MS Word is not a good HTML editor..."
  29     dc:creator=""
  30     dc:date="2007-04-21T20:56:37-06:00" />
  31 </rdf:RDF>
  32 -->
  33
  34
  35
  36
  37    <script type="text/javascript" src="http://defaria.com/blogs/Status/mt-site.js"></script>
  38 </head>
  39 <body class="layout-one-column" onload="individualArchivesOnLoad(commenter_name)">
  40    <div id="container">
  41       <div id="container-inner" class="pkg">
  42
  43          <div id="banner">
  44             <div id="banner-inner" class="pkg">
  45                <h1 id="banner-header"><a href="http://defaria.com/blogs/Status/" accesskey="1">Status for Andrew DeFaria</a></h1>
  46                <h2 id="banner-description">Searchable status reports and work log</h2>
  47             </div>
  48          </div>
  49
  50          <div id="pagebody">
  51             <div id="pagebody-inner" class="pkg">
  52                <div id="alpha">
  53                   <div id="alpha-inner" class="pkg">
  54
  55                      <p class="content-nav">
  56                         <a href="http://defaria.com/blogs/Status/archives/000633.html">&laquo; Turning on HTML for Exchange/IMAP</a> |
  57                         <a href="http://defaria.com/blogs/Status/">Main</a>
  58                         | <a href="http://defaria.com/blogs/Status/archives/000636.html">GPDB Enhancements/Fixes &raquo;</a>
  59                      </p>
  60
  61                      <a id="a000634"></a>
  62                      <div class="entry" id="entry-634">
  63                         <h3 class="entry-header">Why MS Word is a bad HTML editor</h3>
  64                         <div class="entry-content">
  65                            <div class="entry-body">
  66                               <ul>
  67   <li>Described a little bit about why MS Word is not a good HTML editor</li>
  68 </ul>
  69                            </div>
  70                            <div id="more" class="entry-more">
  71                               <p>LeGrand, Christina wrote:</p>
  72
  73 <blockquote type=cite>
  74   <p>Larry, thanks for the great feedback! I have made the last three changes listed here - to the wording in the  "Just the FAQs" section, the "ITS
  75 in the Customer Success Story, and the URL in the LDM docs section. Great catches! For the first two suggestions, all secondary titles are Arial 11, so I am not sure why they look different in your Outlook, but I believe you that they do. If anyone knows of how to prevent this, please let me know!</p>
  76 </blockquote>
  77
  78 The proper way to "prevent" such things is to use the proper way to do
  79 such things. To do this one should follow the standards and then
  80 validate (as Regan said to Gorbachev "<a
  81  href="http://www.brainyquote.com/quotes/quotes/r/ronaldreag147717.html">Trust
  82 but verify</a>").<br>
  83 <br>
  84 HTML headers should be done with the "H" tags of which there are H1 -
  85 H6. IOW one should not be putting any kinds of font information such as
  86 Arial nor point size in there. Such presentation information is best
  87 left to the eventual reader, who may not have the font you've chosen
  88 nor want Wingbats in Pink at 24 point! <br>
  89 <br>
  90 However if you must code in a layout that's what CSS is for.<br>
  91 <br>
  92 In any event Word, which this was made with, is an absolutely horrible
  93 HTML editor! And I shall now show you some of the reasons why. I hope
  94 you'll enjoy this ride as much as I will...<br>
  95 <br>
  96 First off MS Word created HTML pages contain a lot of bloat. What Word
  97 does is include styling information at the beginning of the document to
  98 cover MS Word "styles" then applies "styles" to the layout. This is
  99 done, AFAICT, to attempt to get the web page to look "just like it did
 100 in Word". In a sentence - It's bad web design and bloat to your web
 101 pages let alone often non-standard and should be avoided at all costs.<br>
 102 <br>
 103 Here is the beginning bloat:<br>
 104 <blockquote>
 105   <pre id="line165">&lt;html xmlns:v=3D"urn:schemas-microsoft-com:vml" =
 106 xmlns:o=3D"urn:schemas-microsoft-com:office:office" =
 107 xmlns:w=3D"urn:schemas-microsoft-com:office:word" =
 108 xmlns:st1=3D"urn:schemas-microsoft-com:office:smarttags" =
 109 xmlns=3D<a class="moz-txt-link-rfc2396E" href="http://www.w3.org/TR/REC-html40">"http://www.w3.org/TR/REC-html40"</a>&gt;
 110
 111
 112 &lt;head&gt;
 113 &lt;meta http-equiv=3DContent-Type content=3D"text/html; =
 114 charset=3Dus-ascii"&gt;
 115 &lt;meta name=3DProgId content=3DWord.Document&gt;
 116 &lt;meta name=3DGenerator content=3D"Microsoft Word 11"&gt;
 117 &lt;meta name=3DOriginator content=3D"Microsoft Word 11"&gt;
 118 &lt;link rel=3DFile-List href=3D<a class="moz-txt-link-rfc2396E" href="cid:filelist.xml@01C78350.D624B260">"cid:filelist.xml@01C78350.D624B260"</a>&gt;
 119 &lt;link rel=3DEdit-Time-Data href=3D<a class="moz-txt-link-rfc2396E" href="cid:editdata.mso">"cid:editdata.mso"</a>&gt;
 120
 121 &lt;!--[if !mso]&gt;
 122 &lt;style&gt;
 123 v\:* {behavior:url(#default#VML);}
 124 o\:* {behavior:url(#default#VML);}
 125 w\:* {behavior:url(#default#VML);}
 126 .shape {behavior:url(#default#VML);}
 127   </pre>
 128   <pre id="line238">&lt;/style&gt;
 129 &lt;![endif]--&gt;&lt;o:SmartTagType
 130  namespaceuri=3D"urn:schemas-microsoft-com:office:smarttags" =
 131 name=3D"City"/&gt;
 132 &lt;o:SmartTagType =
 133 namespaceuri=3D"urn:schemas-microsoft-com:office:smarttags"
 134  name=3D"PlaceType"/&gt;
 135 &lt;o:SmartTagType =
 136 namespaceuri=3D"urn:schemas-microsoft-com:office:smarttags"
 137  name=3D"PlaceName"/&gt;
 138 &lt;o:SmartTagType =
 139 namespaceuri=3D"urn:schemas-microsoft-com:office:smarttags"
 140  name=3D"place"/&gt;
 141
 142 &lt;o:SmartTagType =
 143 namespaceuri=3D"urn:schemas-microsoft-com:office:smarttags"
 144  name=3D"PersonName"/&gt;
 145 &lt;!--[if gte mso 9]&gt;&lt;xml&gt;
 146  &lt;o:OfficeDocumentSettings&gt;
 147   &lt;o:DoNotRelyOnCSS/&gt;
 148  &lt;/o:OfficeDocumentSettings&gt;
 149 &lt;/xml&gt;&lt;![endif]--&gt;&lt;!--[if gte mso 9]&gt;&lt;xml&gt;
 150  &lt;w:WordDocument&gt;
 151   &lt;w:SpellingState&gt;Clean&lt;/w:SpellingState&gt;
 152   &lt;w:DocumentKind&gt;DocumentEmail&lt;/w:DocumentKind&gt;
 153   &lt;w:EnvelopeVis/&gt;
 154   &lt;w:ValidateAgainstSchemas/&gt;
 155   &lt;w:SaveIfXMLInvalid&gt;false&lt;/w:SaveIfXMLInvalid&gt;
 156   &lt;w:IgnoreMixedContent&gt;false&lt;/w:IgnoreMixedContent&gt;
 157   &lt;w:AlwaysShowPlaceholderText&gt;false&lt;/w:AlwaysShowPlaceholderText&gt;
 158   &lt;w:BrowserLevel&gt;MicrosoftInternetExplorer4&lt;/w:BrowserLevel&gt;
 159  &lt;/w:WordDocument&gt;
 160   </pre>
 161   <pre id="line269">&lt;/xml&gt;&lt;![endif]--&gt;&lt;!--[if gte mso 9]&gt;&lt;xml&gt;
 162  &lt;w:LatentStyles DefLockedState=3D"false" LatentStyleCount=3D"156"&gt;
 163  &lt;/w:LatentStyles&gt;
 164
 165 &lt;/xml&gt;&lt;![endif]--&gt;&lt;!--[if !mso]&gt;
 166 &lt;style&gt;
 167 st1\:*{behavior:url(#default#ieooui) }
 168 &lt;/style&gt;
 169 &lt;![endif]--&gt;
 170 &lt;style&gt;
 171 &lt;!--
 172  /* Font Definitions */
 173  @font-face
 174         {font-family:Tahoma;
 175         panose-1:2 11 6 4 3 5 4 4 2 4;
 176         mso-font-alt:Verdana;
 177         mso-font-charset:0;
 178         mso-generic-font-family:swiss;
 179         mso-font-pitch:variable;
 180         mso-font-signature:1627421319 -2147483648 8 0 66047 0;}
 181  /* Style Definitions */
 182  p.MsoNormal, li.MsoNormal, div.MsoNormal
 183         {mso-style-parent:"";
 184         margin:0in;
 185         margin-bottom:.0001pt;
 186         mso-pagination:widow-orphan;
 187         font-size:12.0pt;
 188         font-family:"Times New Roman";
 189         mso-fareast-font-family:"Times New Roman";
 190         color:black;}
 191 a:link, span.MsoHyperlink
 192         {color:blue;
 193         text-decoration:underline;
 194         text-underline:single;}
 195 a:visited, span.MsoHyperlinkFollowed
 196         {color:purple;
 197         text-decoration:underline;
 198         text-underline:single;}
 199 p
 200         {mso-margin-top-alt:auto;
 201         margin-right:0in;
 202         mso-margin-bottom-alt:auto;
 203         margin-left:0in;
 204         mso-pagination:widow-orphan;
 205         font-size:12.0pt;
 206         font-family:"Times New Roman";
 207         mso-fareast-font-family:"Times New Roman";
 208         color:black;}
 209 p.newslettertitle, li.newslettertitle, div.newslettertitle
 210         {mso-style-name:newslettertitle;
 211         mso-margin-top-alt:auto;
 212         margin-right:0in;
 213         mso-margin-bottom-alt:auto;
 214         margin-left:0in;
 215         mso-pagination:widow-orphan;
 216         font-size:12.0pt;
 217         font-family:"Times New Roman";
 218         mso-fareast-font-family:"Times New Roman";
 219         color:black;}
 220 p.newslettertext, li.newslettertext, div.newslettertext
 221         {mso-style-name:newslettertext;
 222         mso-margin-top-alt:auto;
 223         margin-right:0in;
 224         mso-margin-bottom-alt:auto;
 225         margin-left:0in;
 226         mso-pagination:widow-orphan;
 227         font-size:12.0pt;
 228         font-family:"Times New Roman";
 229         mso-fareast-font-family:"Times New Roman";
 230         color:black;}
 231 p.newsletterheading, li.newsletterheading, div.newsletterheading
 232         {mso-style-name:newsletterheading;
 233         mso-margin-top-alt:auto;
 234         margin-right:0in;
 235         mso-margin-bottom-alt:auto;
 236         margin-left:0in;
 237         mso-pagination:widow-orphan;
 238         font-size:12.0pt;
 239         font-family:"Times New Roman";
 240         mso-fareast-font-family:"Times New Roman";
 241         color:black;}
 242 p.newsletterbullet, li.newsletterbullet, div.newsletterbullet
 243         {mso-style-name:newsletterbullet;
 244         mso-margin-top-alt:auto;
 245         margin-right:0in;
 246         mso-margin-bottom-alt:auto;
 247         margin-left:0in;
 248         mso-pagination:widow-orphan;
 249         font-size:12.0pt;
 250         font-family:"Times New Roman";
 251         mso-fareast-font-family:"Times New Roman";
 252         color:black;}
 253 span.EmailStyle22
 254         {mso-style-type:personal;
 255         mso-style-noshow:yes;
 256         mso-ansi-font-size:10.0pt;
 257         mso-bidi-font-size:10.0pt;
 258         font-family:Arial;
 259         mso-ascii-font-family:Arial;
 260         mso-hansi-font-family:Arial;
 261         mso-bidi-font-family:Arial;}
 262 span.EmailStyle23
 263         {mso-style-type:personal;
 264         mso-style-noshow:yes;
 265         mso-ansi-font-size:10.0pt;
 266         mso-bidi-font-size:10.0pt;
 267         font-family:Arial;
 268         mso-ascii-font-family:Arial;
 269         mso-hansi-font-family:Arial;
 270         mso-bidi-font-family:Arial;
 271         color:navy;}
 272 span.EmailStyle24
 273         {mso-style-type:personal;
 274         mso-style-noshow:yes;
 275         mso-ansi-font-size:10.0pt;
 276         mso-bidi-font-size:10.0pt;
 277         font-family:Arial;
 278         mso-ascii-font-family:Arial;
 279         mso-hansi-font-family:Arial;
 280         mso-bidi-font-family:Arial;
 281         color:navy;}
 282 span.EmailStyle27
 283         {mso-style-type:personal-reply;
 284         mso-style-noshow:yes;
 285         mso-ansi-font-size:10.0pt;
 286         mso-bidi-font-size:10.0pt;
 287         font-family:Arial;
 288         mso-ascii-font-family:Arial;
 289         mso-hansi-font-family:Arial;
 290         mso-bidi-font-family:Arial;
 291         color:navy;}
 292 span.SpellE
 293         {mso-style-name:"";
 294         mso-spl-e:yes;}
 295 @page Section1
 296         {size:8.5in 11.0in;
 297         margin:1.0in 1.25in 1.0in 1.25in;
 298         mso-header-margin:.5in;
 299         mso-footer-margin:.5in;
 300         mso-paper-source:0;}
 301 div.Section1
 302         {page:Section1;}
 303 --&gt;
 304 &lt;/style&gt;
 305
 306 &lt;!--[if gte mso 10]&gt;
 307 &lt;style&gt;
 308  /* Style Definitions */=20
 309  table.MsoNormalTable
 310         {mso-style-name:"Table Normal";
 311         mso-tstyle-rowband-size:0;
 312         mso-tstyle-colband-size:0;
 313         mso-style-noshow:yes;
 314         mso-style-parent:"";
 315         mso-padding-alt:0in 5.4pt 0in 5.4pt;
 316         mso-para-margin:0in;
 317         mso-para-margin-bottom:.0001pt;
 318         mso-pagination:widow-orphan;
 319         font-size:10.0pt;
 320         font-family:"Times New Roman";
 321         mso-ansi-language:#0400;
 322         mso-fareast-language:#0400;
 323         mso-bidi-language:#0400;}
 324   </pre>
 325   <pre id="line430">&lt;/style&gt;
 326 &lt;![endif]--&gt;&lt;!--[if gte mso 9]&gt;&lt;xml&gt;
 327  &lt;o:shapedefaults v:ext=3D"edit" spidmax=3D"1026" /&gt;
 328 &lt;/xml&gt;&lt;![endif]--&gt;&lt;!--[if gte mso 9]&gt;&lt;xml&gt;
 329  &lt;o:shapelayout v:ext=3D"edit"&gt;
 330   &lt;o:idmap v:ext=3D"edit" data=3D"1" /&gt;
 331  &lt;/o:shapelayout&gt;&lt;/xml&gt;&lt;![endif]--&gt;
 332
 333 &lt;/head&gt;
 334   </pre>
 335 </blockquote>
 336 Now wasn't that fun? <span class="moz-smiley-s1"><span> :-) </span></span><br>
 337 <br>
 338 After creating all that crud we are now able to apply it to our
 339 content. Here's the part that does the heading:<br>
 340 <blockquote><tt> &lt;p class=3Dnewsletterheading =<br>
 341 style=3D'mso-margin-top-alt:0in;margin-right:<br>
 342 0in;margin-bottom:4.0pt;margin-left:0in'&gt;&lt;span =<br>
 343 style=3D'mso-bookmark:OLE_LINK1'&gt;&lt;span<br>
 344 style=3D'mso-bookmark:OLE_LINK10'&gt;&lt;span =<br>
 345 style=3D'mso-bookmark:OLE_LINK11'&gt;&lt;span<br>
 346 style=3D'mso-bookmark:OLE_LINK12'&gt;&lt;span =<br>
 347 style=3D'mso-bookmark:OLE_LINK2'&gt;&lt;span<br>
 348 style=3D'mso-bookmark:OLE_LINK3'&gt;&lt;strong&gt;&lt;b&gt;&lt;font
 349 size=3D3 =<br>
 350 color=3Dblack<br>
 351 face=3DArial&gt;&lt;span =<br>
 352 style=3D'font-size:12.0pt;font-family:Arial;mso-bidi-font-style:<br>
 353 italic'&gt;DesignSync Documentation Has
 354 Moved&lt;/span&gt;&lt;/font&gt;&lt;span<br>
 355 =<br>
 356 style=3D'mso-bidi-font-style:italic'&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/b&gt;&lt;/strong&gt;&lt;/spa=<br>
 357 n&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;<br>
 358   </tt></blockquote>
 359 OK, not you tell me - where's the Arial 11 point in there?<br>
 360
 361 <br>
 362 I'm sure you've enjoyed the above exercise...<br>
 363 <br>
 364 Oh, and how does this look in "straight" HTML?<br>
 365 <blockquote><tt>&lt;h2&gt;DesignSync Documentation Has Moved&lt;/h2&gt;</tt><br>
 366 </blockquote>
 367
 368                            </div>
 369                         </div>
 370                         <p class="entry-footer">
 371                            <span class="post-footers">Posted by  on April 21, 2007  8:56 PM</span> <span class="separator">|</span> <a class="permalink" href="http://defaria.com/blogs/Status/archives/000634.html">Permalink</a>
 372                         </p>
 373                      </div>
 374
 375
 376                      <div class="trackbacks">
 377                         <h3 id="trackback" class="trackbacks-header">TrackBack</h3>
 378                         <div id="trackbacks-info">
 379                            <p>TrackBack URL for this entry:<br />http://defaria.com/mt/mt-tb.cgi/23</p>
 380                         </div>
 381                         <div class="trackbacks-content">
 382
 383                         </div>
 384                      </div>
 385
 386
 387
 388                   </div>
 389                </div>
 390             </div>
 391          </div>
 392       </div>
 393    </div>
 394 </body>
 395 </html>