Web Page Development - the Modern Way

The HyperText Markup Language (HTML) originally comprised tags just to control how the web page content should be structured in paragraphs and tables. In 1993 the <img> tag was added to allow the inclusion of images within web pages and suddenly the web became much more interesting. Soon, due to pressure from web developers, the <font> tag was added which included "color" and "size" attributes so web page authors could specify presentation for each component of a page. Additionally the <script> tag allowed functionality to be added to web pages with custom script functions able to specify dynamic behavior for any interactive web page component.

Although HTML had evolved to facilitate each of these three essential aspects it did so in a very inefficient way in the context of website development as the appearance and functionality controls needed to be included within each individual page. Typically many websites provide uniform presentation and behavior across each page with only the content varying. Modern web page development offers a better alternative by separating each of the three essentials into individual documents defined by specialized languages:

HTML

The HTML document contains the text and graphics which are the actual data displayed on the page. The tags in this document purely define the structure of the content but do not specify the appearance of fonts, colors, position, or functionality. It may, however, include a <link> tag to specify the location of a style sheet for presentation and a <script> tag to specify the location of a script for behavior. See HTML in easy steps

CSS

The Cascading Style Sheet (CSS) document contains a list of rules that determine the presentation of each component of the web page. These formatting controls determine the font, color, and position for the content. A single style sheet can be used by each HTML page of a website, controlling the appearance of each page in a uniform style. See CSS in easy steps

JavaScript

The JavaScript (JS) document contains a list of custom functions that determine the behavior of interactive components of the web page. These provide dynamic interactive reaction to user actions which can modify content and submit form data to the server for processing. A single script can be used by each HTML page of a website, controlling the behavior of each page in a uniform manner. See JavaScript in easy steps

Separating content, presentation and behavior in this way provides some important benefits:

• Cleaner, simpler HTML documents which are much smaller in size - so download quicker, making websites much more compact
• Ease of use where a single rule can be written in the CSS style sheet to determine the appearance of a single HTML element, or multiple elements in a single HTML document, or even elements throughout multiple HTML documents
• Ensures consistent uniformity because the appearance of all web pages are controlled from a single style sheet
• Ease of maintenance where the appearance of all pages of a website can be updated by modifying the style sheet. For instance, write a single rule to color all <h1> heading elements red - rather than the old method of laboriously adding presentational tags to each page
• CSS offers greater styling possibilities than those in HTML - allowing you to specify text color and background color, create surrounding borders, increase or decrease surrounding space, set text capitalization and decoration, and even control element visibility
• Script functions are more easily controlled when placed in a single script document that makes all functions available to each page
• CSS provides more precise positioning control than the traditional method using HTML tables
• The style rules are simply ignored where the browser does not support CSS
• This technique is ready for the future in which the eXtensible Markup Language (XML) may replace HTML as the "lingua franca" of the web as CSS can also be used to determine the appearance of XML documents. See XML in easy steps