Comparing static webpages with phpWebSite

Choose

Comparing static webpages with phpWebSite

updated by rck, 2007-01-07

A lot of people are confronted with a tough decission: Should I go for static pages or should I rather take a CMS for my web content needs? While the comparison between a static web page and a CMS might seem a little bit unfair to the pros, it is still reality and something worth reviewing.

The following article tries to shine a little light on the possibilities of phpWebSite, compared with static solutions that can cope without databases and even without php.

1 | 2 | 3 | 4 | 5

Static Web Pages

Hello, World!

Static Web pages have been around since the start of the web. In fact, every web browser around can process html pages in one way or the other. A typical web page looks something like

1 <html>
2         <head>
3                 <title>Hello,                   World!</title>
4         </head>
5         <body>
6                 <h1>Hello, World</h1>
7                 <p>This is a short example of how a web page can look like</p>
8         </body>
9 </html>

Line 3 introduces a page title, which can be seen in your browser's title bar. And lines 6 and 7 contain the actual content of this simple page which results in a friendly greeting being shown.

Working with html editors
While this code seems to be easy enough, it is often easier to use a dedicated HTML editor to edit HTML code. Even office software like MS Word can produce HTML output. The downside here is, that this is not exactly "pretty" code. As soon as you go the "HTML Editor" road, there's almost no going back to the simple code shown above. As a short example, this is how the Hello World page from above looks, after rendered by the MS Word 2003 HTML export. It does exactly the same like the 9 lines in the previous section: `1 <html xmlns:o="urn:schemas-microsoft-com: office:office"` `2 xmlns:w="urn:schemas-microsoft-com:office:word"` `3 xmlns="http://www.w3.org/TR/REC-html40">` `4` `5 <head>` `6 <meta http-equiv=Content-Type content="text/html; charset=windows-1252">` `7 <meta name=ProgId content=Word.Document>` `8 <meta name=Generator content="Microsoft Word 10">` `9 <meta name=Originator content="Microsoft Word 10">` `10 <link rel=File-List href="Hello_word2-Dateien/filelist.xml">` `11 <title>Hello, World</title>` `12 <!--[if gte mso 9]><xml>` `13 <o:DocumentProperties>` `14 <o:Author>rck</o:Author>` `15 <o:LastAuthor>rck</o:LastAuthor>` `16 <o:Revision>2</o:Revision>` `17 <o:Created>2007-01-06T22:58:00Z</o:Created>` `18 <o:LastSaved>2007-01-06T22:58:00Z</o:LastSaved>` `19 <o:Pages>1</o:Pages>` `20 <o:Words>9</o:Words>` `21 <o:Characters>62</o:Characters>` `22 <o:Company>Studentenversion TU - Wien</o:Company>` `23 <o:Lines>1</o:Lines>` `24 <o:Paragraphs>1</o:Paragraphs>` `25 <o:CharactersWithSpaces>70</o:CharactersWithSpaces>` `26 <o:Version>10.2625</o:Version>` `27 </o:DocumentProperties>` `28 </xml><![endif]--> <!--[if gte mso 9]><xml>` `29 <w:WordDocument>` `30 <w:SpellingState>Clean</w:SpellingState>` `31 <w:GrammarState>Clean</w:GrammarState>` `32 <w:HyphenationZone>21</w:HyphenationZone>` `33 <w:Compatibility>` `34 <w:BreakWrappedTables/>` `35 <w:SnapToGridInCell/>` `36 <w:WrapTextWithPunct/>` `37 <w:UseAsianBreakRules/>` `38 </w:Compatibility>` `39 <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>` `40 </w:WordDocument>` `41 </xml><![endif]-->` `42 <style>` `43 <!--` `44 /* Style Definitions /` `45 p.MsoNormal, li.MsoNormal, div.MsoNormal` `46 {mso-style-parent:"";` `47 margin:0in;` `48 margin-bottom:.0001pt;` `49 mso-pagination:widow-orphan;` `50 font-size:12.0pt;` `51 font-family:"Times New Roman";` `52 mso-fareast-font-family:"Times New Roman";}` `53 h1` `54 {mso-style-next:Standard;` `55 margin-top:12.0pt;` `56 margin-right:0in;` `57 margin-bottom:3.0pt;` `58 margin-left:0in;` `59 mso-pagination:widow-orphan;` `60 page-break-after:avoid;` `61 mso-outline-level:1;` `62 font-size:16.0pt;` `63 font-family:Arial;` `64 mso-font-kerning:16.0pt;}` `65 @page Section1` `66 {size:595.3pt 841.9pt;` `67 margin:70.85pt 70.85pt 56.7pt 70.85pt;` `68 mso-header-margin:.5in;` `69 mso-footer-margin:.5in;` `70 mso-paper-source:0;}` `71 div.Section1` `72 {page:Section1;}` `73 -->` `74 </style>` `75 <!--[if gte mso 10]>` `76 <style>` `77 / Style Definitions */` `78 table.MsoNormalTable` `79 {mso-style-name:"Normale Tabelle";` `80 mso-tstyle-rowband-size:0;` `81 mso-tstyle-colband-size:0;` `82 mso-style-noshow:yes;` `83 mso-style-parent:"";` `84 mso-padding-alt:0in 5.4pt 0in 5.4pt;` `85 mso-para-margin:0in;` `86 mso-para-margin-bottom:.0001pt;` `87 mso-pagination:widow-orphan;` `88 font-size:10.0pt;` `89 font-family:"Times New Roman";}` `90 </style>` `91 <![endif]-->` `92 </head>` `93` `94 <body lang=DE-AT style='tab-interval:35.4pt'>` `95` `96 <div class=Section1>` `97` `98 <h1><span lang=EN-US style='mso-ansi-language:EN-US'>Hello, World<o:p></o:p></span></h1>` `99` `100 <p class=MsoNormal><span lang=EN-US style='mso-ansi-language:EN-US'> <o:p> </o:p></span></p>` `101` `102 <p class=MsoNormal><span lang=EN-US style='mso-ansi-language:EN-US'> This is a` `103 short example of how a web page can look like<o:p></o:p></span></p>` `104` `105 <p class=MsoNormal><span lang=EN-US style='mso-ansi-language:EN-US'> <o:p> </o:p></span></p>` `106` `107 </div>` `108` `109 </body>` `110` `111 </html>` Please note again: This HTML code does exactly the same like the one in the section before. Both are lacking fancy style information and are pretty boring.

Working with html editors

While this code seems to be easy enough, it is often easier to use a dedicated HTML editor to edit HTML code. Even office software like MS Word can produce HTML output. The downside here is, that this is not exactly "pretty" code.

As soon as you go the "HTML Editor" road, there's almost no going back to the simple code shown above. As a short example, this is how the Hello World page from above looks, after rendered by the MS Word 2003 HTML export. It does exactly the same like the 9 lines in the previous section:

1 <html xmlns:o="urn:schemas-microsoft-com:    office:office"
2 xmlns:w="urn:schemas-microsoft-com:office:word"
3 xmlns="http://www.w3.org/TR/REC-html40">
4
5 <head>
6 <meta http-equiv=Content-Type content="text/html; charset=windows-1252">
7 <meta name=ProgId content=Word.Document>
8 <meta name=Generator content="Microsoft Word 10">
9 <meta name=Originator content="Microsoft Word 10">
10 <link rel=File-List href="Hello_word2-Dateien/filelist.xml">
11 <title>Hello, World</title>
12     
42 <style>
43 
74 </style>
75 
92 </head>
93
94 <body lang=DE-AT style='tab-interval:35.4pt'>
95
96 <div class=Section1>
97
98 <h1><span lang=EN-US style='mso-ansi-language:EN-US'>Hello,    World<o:p></o:p></span></h1>
99
100 <p class=MsoNormal><span lang=EN-US style='mso-ansi-language:EN-US'>    <o:p> </o:p></span></p>
101
102 <p class=MsoNormal><span lang=EN-US style='mso-ansi-language:EN-US'>    This is a
103 short example of how a web page can look like<o:p></o:p></span></p>
104
105 <p class=MsoNormal><span lang=EN-US style='mso-ansi-language:EN-US'>    <o:p> </o:p></span></p>
106
107 </div>
108
109 </body>
110
111 </html>

Please note again: This HTML code does exactly the same like the one in the section before. Both are lacking fancy style information and are pretty boring.

All kind of workarounds
Static Pages have a couple of drawbacks. You cannot easily provide every page with the same menu for example. Also, if you want to include some text on every page (think copyright statement, etc.) you have to put it on every page. If you want to change something on every page, you really have to change it on every page. Workarounds for that include Server Side Includes and Frames (yes, they already sucked back in 1996). Server Side Includes are just what they say: Means to include some kind of text into various pages and having to write that text only once. Nothing more, nothing less. Frames on the other hand are a non-standard Netscape invention that somehow made it into the official HTML standard. Essentially, a frameset provides a container where you can put other HTML pages into, client-based. So that concept is pretty similar to SSI, except it has a couple of big drawbacks: Frames are not indexed by a lot of search engines. Your content might not show up if you search for it in Google. If they are indexed, Search machines might lead to sub-pages, thus not loading your entire frameset. People might be stuck without for example the menu. Frames cannot degrade nicely if viewed in mobile devices (Mobile Phones, Handhelds, Nintendo DS, ...) Also, most framesets are of either fixed size or look plain ugly And then, there are the work-arounds to the work-arounds, with JavaScript for example. But there are better solutions.

All kind of workarounds

Static Pages have a couple of drawbacks. You cannot easily provide every page with the same menu for example. Also, if you want to include some text on every page (think copyright statement, etc.) you have to put it on every page. If you want to change something on every page, you really have to change it on every page.

Workarounds for that include Server Side Includes and Frames (yes, they already sucked back in 1996). Server Side Includes are just what they say: Means to include some kind of text into various pages and having to write that text only once. Nothing more, nothing less.

Frames on the other hand are a non-standard Netscape invention that somehow made it into the official HTML standard. Essentially, a frameset provides a container where you can put other HTML pages into, client-based. So that concept is pretty similar to SSI, except it has a couple of big drawbacks:

Frames are not indexed by a lot of search engines. Your content might not show up if you search for it in Google.
If they are indexed, Search machines might lead to sub-pages, thus not loading your entire frameset. People might be stuck without for example the menu.
Frames cannot degrade nicely if viewed in mobile devices (Mobile Phones, Handhelds, Nintendo DS, ...)
Also, most framesets are of either fixed size or look plain ugly

And then, there are the work-arounds to the work-arounds, with JavaScript for example. But there are better solutions.

1 | 2 | 3 | 4 | 5

A little bit of history
Static Web Pages
Hello CGI
How to manage content
At a glance

All Articles