HTML editors are great for creating web pages quickly and easily. They are a
convenience for beginners and experienced web masters alike. But all HTML
editors do not write identical code. While some straight HTML editors do a
very good job (I'm partial to Arachnophilia), many WYSIWYG editors write
what we call
bloated
code, using much more code than is necessary and increasing your download times
exponetially. Most experienced web authors avoid using a word processor such as
Microsoft® Word/Publisher to create their web pages.
The Mini Web Page illustrated on the right is about as simple as a web page can
be. Below are two versions of code for this Mini Web Page. In your browser, the
pages appear to be virtually identical, but the file size for the MS Word2000
generated web page
is 3-1/2 times the size of the basic HTML page. You probably
won't notice much difference when visiting this Mini Page. But an average web
page containing about 25KB of HTML requires about 7 seconds to download with a
28.8 modem. The MS Word version of the HTML will require at least 28 seconds
to download.
Other things to consider when using a word processor or WYSIWYG editor to
generate your HTML:
- The complexity of the generated code which can make
it difficult to edit or insert code manually; for example, inserting the
snippet of code for a RootsWeb counter; and
-
Proprietary code which may not work in other browsers.
You can view and compare both versions of the Mini
Web Page using
the
actual page
links below.
Basic HTML Code
File size=1,015 bytes
*
See the
actual page
created by this code
|
XHTML Code written by MSWord2000
File size=3,436 bytes
*
See the
actual page
created by this code
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>
Web Page Code - HTML
</title>
<meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1">
<meta name="author" content="Copyright2000 Patricia J. Asher">
<meta name="keywords" content="HTML,XHTML,tutorial">
<meta name="description"content="HTML vs XHTML, part of a brief tutorial on
the basics of writing HTML.">
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080"
alink="#ff0000">
<h1 align="center">
This is a Mini Web Page
</h1>
<p align="center">
It includes all the basic components of any web page:
<br>
META tags and some links:
<br>
See the <a href=
"http://homepages.rootsweb.com/~pasher/xhtmlvers.htm">
XHTML Version</a><br>
Back to <a href=
"http://freepages.computers.rootsweb.com/~pasher/wpcode.htm">
<i> Web Pages are NOT Created Equal
</i></a>
</p>
<p align="center">
And a graphic:
<img src="rweb1.gif" width="170" height="60" alt="RootsWeb">
</p>
<br>
<br>
</body>
</html>
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 9">
<meta name=Originator content="Microsoft Word 9">
<link rel=File-List href="./xhtmlvers_files/filelist.xml">
<link rel=Edit-Time-Data href="./xhtmlvers_files/editdata.mso">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<title> Web Page Code - XHTML </title>
<!--[if gte mso 9]><xml>
<o:DocumentProperties>
<o:Author>Patricia Asher</o:Author>
<o:LastAuthor>Patricia Asher</o:LastAuthor>
<o:Revision>2</o:Revision>
<o:TotalTime>4</o:TotalTime>
<o:Created>2002-07-12T20:20:00Z</o:Created>
<o:LastSaved>2002-07-12T20:20:00Z</o:LastSaved>
<o:Pages>1</o:Pages>
<o:Words>63</o:Words>
<o:Characters>362</o:Characters>
<o:Lines>3</o:Lines>
<o:Paragraphs>1</o:Paragraphs>
<o:CharactersWithSpaces>444</o:CharactersWithSpaces>
<o:Version>9.3821</o:Version>
</o:DocumentProperties>
</xml><![endif]-->
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";
color:black;}
h1
{color:black;}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;
text-underline:single;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;
text-underline:single;}
p
{font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";
color:black;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:0;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1"/>
</o:shapelayout></xml><![endif]-->
<meta name=author content="Copyright2000 Patricia J. Asher">
<meta name=keywords content="HTML,XHTML,tutorial">
<meta name=description
content="HTML vs XHTML, part of a brief tutorial on the basics of writing
HTML.">
</head>
<body bgcolor=white lang=EN-US link=blue vlink=purple
style='tab-interval:.5in'
alink="#ff0000">
<div class=Section1>
<h1 align=center style='text-align:center'>This is a Mini Web Page
</h1>
<p align=center style='text-align:center'>It includes all the basic
components
of any web page: <br>
META tags and some links: <br>
See the <a href=
"http://homepages.rootsweb.com/~pasher/htmlvers.htm">
HTML Version</a> <br> Back to <a href=
"http://freepages.computers.rootsweb.com/~pasher/wpcode.htm">
<i>Web Pages are NOT Created Equal</i></a> </p>
<p align=center style='text-align:center'>And a graphic:
<img
border=0 width=170 height=60 id="_x0000_i1025" src=rweb1.gif
alt=RootsWeb></p>
<p class=MsoNormal style='margin-bottom:12.0pt'>
<![if
!supportEmptyParas]>
<![endif]><o:p></o:p></p>
</div>
</body>
</html>
|
*
Note: File size refers to the HTML only and does not include the graphic
displayed on the Mini Web
Page.
|
