Webpage Coding
Getting Started
#1 Example Webpage
#2 Adding CSS
Compatible CSS
#3 Adding Metadata
#4 JS Masked Email
#5 Sharing SSIs
#6 Support Testing
Password Access
Custom 404 Page
Next section...
JS Applications

Webpage Coding

Getting Started

Before you begin you should give some thought as to how you will code the pages; specifically what software you will use. Your criteria should be:

  • Something that you are familiar with (or willing to learn).
  • Something that will not compromise your design ideas.
  • Something that will produce compliant code.

There are two main schools of thought here; WYSIWYG and hand-coding.

WYSIWYG is an acronym for "What You See Is What You Get". This type of editor displays the page as it will appear in a browser and allows you to directly edit the final output, the software takes care of translating your entries back into the required HTML.

There are many such third party applications out there that will do this, MS-FrontPage, MS-Publisher, DreamWeaver, Cold Fusion to name but a few. All will require you to learn how to use the software although they require little understanding of HTML, CSS or how webpages should be structured, this is not always a good thing as it will just as easily write garbage as high quality compliant code.

My personal view is that this is an example of "The Emporer's New Clothes" syndrome, whilst everyone praises the speed of development that is possible with tools such as DreamWeaver or Cold Fusion and the flashy websites that can be produced using pre-existing templates, the underlying code is often a complete mess and only maintainable within the original software and template suite.

The alternative to this is hand-coding. This requires nothing more than a text editor, if you really had to then on Windows you could use NotePad (shudder!) or on a Unix system you can use good old vi. You can use Apache to serve the pages properly and your web-browser to view the results, little more is needed, you are in business.

By applying good design principles, such as using Server-Side Includes and sharing key data such as CSS and JS applications you have the equivalent of a template that can be used elsewhere or modified with ease.

NoteTab logo and link to their website... My text editing tool of choice is NoteTab. This is a fairly sophisticated award winning text editor which is semi-programable and can run macros and 'clips' of code. I cannot recommend this highly enough - it is incredibly powerful and very handy. There are three versions, each with increased capability, Lite, Std and Pro. Lite is freely downloadable as a shareware demo, the other two are both very reasonably priced. »http://www.notetab.com/

Well ok, you do also need to know what you are doing, with a good understanding of file system maintenance, HTML, CSS, JS and so on. This requires some effort to learn but quite frankly little more effort than getting to grips with any third party WYSIWYG application, and your detailed knowledge will take you a lot further.

Show Style-Switcher...