The Story of the Web

The world has come a long way from CERN.  The web as it was conceived by Tim Berners-Lee is hardly recognizable in its reach today.  It is no longer a minor network of communication between scientific communities located in a single building or a few buildings across the square.  It is a complex, international, cross platform, cross language, cross cultural mesh of servers, clients, users and databases all talking, searching, viewing, accessing, downloading and working relentlessly 24 x 7 x 365.  No one knows how many servers are out there and the volume of information that is being bandied back and forth across the continents.

While the dimensions of the web have changed and has expanded, not much has changed in the conceptualization.  Tim Berners-Lee was concerned that three technologies must be incorporated if the web has to work.  He identified the language, the protocol and the browser as fundamental requirements for the web. The type of language, the protocol used and the number of browsers available for display have changed but the belief that they are essential has remained unchanged.  Web designers are still very concerned that their pages should display consistently across a variety of browsers and computers!   Trillions of pages of material have been written on the subject and it is the raison de etre for this book. 

The User interface that was first designed was a line mode interface called the World Wide Web (www).  It was used in a minor network in March 1991 and provided for information sharing using HTML, HTTP.  It became fully operational on the multi platform computer network at the CERN laboratories in Switzerland.  Marc Andersen developed the first graphical browser Mosaic in NCSA in 1993.  This later developed into the Internet Explorer and the Netscape Navigator.  The driver of this initiative was the need to discover and create user-friendly environments that would make web usage a pleasurable task.   

The intent was laudable and the achievement commendable. However, the pendulum has swung to the other extreme and the web designer today is confronted with a multitude of browsers sitting on a variety of operating systems that make a mish-mash of his web page and distorts his efforts when displayed in different browsers.  He may well wish for a platform independent, non-browser-based world wide web that displays his page in the way he intended it to display!  

HTML Frustrations:

Frustration is the genesis of innovation in web design. The language of the web started out as simple HTML. It is an abbreviation for Hyper Text Markup Language. It was the language that Tim Berners-Lee used in his CERN.  He had a very limited requirement.  He wanted a technology and a program, which would help him interpret HTML and convert it into screen-based text.  He wanted a browser that enabled this text to be viewed from a range of different computer platforms uniformly.  It served his purpose.

HTML was designed to pass the layout functions to the end user.  The designer was forced to use or misuse the original HTML standard creatively if he felt the need to control the layout.  

Formatting text in HTML is not like formatting text for print.  The text just refuses to stay where it was put.  One method adopted by designers was to establish a general structure of the document by adding HTML tags that create paragraphs and heading levels in raw text.

By default, it is a series of boxes stacked one after another linearly or contained within one another.  The top level box is the page itself.  It is the container for the other boxes which can be <p></p> box or a <H1></H1> box.  These can be box level elements or inline elements.  While box level elements begin and end the line, inline elements are contained within box level elements.  The greatest weakness of HTML is its inability to define a variety of properties for all these boxes.  The boxes cannot be taken out of normal flow. 

Line breaks in HTML have to be deliberately specified; else the language will by default break the lines at different places for a user in accordance with the size of the type and the browser window.  Moreover, HTML does not object to laxity in coding and does not insist that everything is neatly parceled into tags.  

Headings are displayed in bold typeface with automatic line breaks and extra space above and below.  There are six levels of headings available and are expected to be used in the order of hierarchy.  However, creative designers use or misuse these heading sizes to give some sense of formatting to the web page.  With newer tools being available for formatting this feature is more or less redundant.  However, it is mentioned here, as it was one of the major potentially creative style elements of the early HTML web page.  

As mentioned earlier, HTML text tags indicate style or structural information for inline elements. This affects the appearance of the enclosed text without adding line breaks or extra space.  Closing tags are required to turn off the style attribute whenever required.  

However, HTML does not allow the separation of style from content.  It also does not provide for greater typographical and page layout controls.  Site maintenance also becomes and issue if the HTML code has to be gone over and edited every time small stylistic element of the web page has to be tweaked.   

Distinctions between the logical and physical style also, really did not make much sense at this stage of development of web design.  Nevertheless, logical style was regarded as a more pure method of going about style. 

Logical styles or content based styles were used to describe the enclosed text’s meaning, context or usage and leave the rendering issues to the discretion of the browser.   This style enabled the designer specify that a selected text should be emphasized or displayed as code.   Most browsers were also built to adhere to the conventions of logical style. 

Physical styles are used to provide specific instructions to the browser to display text as Italic or strike through.  They are also used to control the size of the text.  

Other inline elements which offer some scope for manipulation and creativity were the font tag, the ordered and unordered lists.  However, the potential for creativity was very limited and often frustrating to the designer whose imagination could not be translated into the web page.

One method that helped get over the limitations of text display in HTML was the use of the preformatted text.  The preformatted text could be displayed in the browser, exactly as it was typed into the HTML code.  It was always displayed in monospace font and this allowed columns of characters to line up correctly. The source text was coded <pre> text and teletype <tt>.  It naturally became a favorite cheat for controlling alignment of text in the browser.

The no-break(<nobr>) tag was developed to ensure that the text displayed in a single line and did not warp over in the browser window.  This had obvious disadvantages as the text flowed beyond the browser window if the string was too long.    

The <wbr> was an esoteric word-break tag that was used in conjunction with the no-break tag to indicate a potential word break in conjunction with a no line break tag.

Centering of text elements was another area where some innovation in positioning was attempted.  The align attribute was used to align text elements horizontally on a page at the block level.   

Indents was a problem in HTML.  There was no specific function for creating indented text in HTML.  So, creative web designers make use of the existing tags to indent text on a web page.  One such element is the use of the <blockquote> and the other is list elements. 

The Mosaic browser that was developed in 1993 had a very different aim.  It built in capabilities of displaying text and graphics, which was something the users were looking for.  Unfortunately, technological restrictions of the time imposed limitations on this browser.  Slow modem connections, monochrome monitors, top to bottom layouts and left to right sequencing of text and images and interspersed layouts with carriage returns and data stream separators did not provide much scope for innovation or imagination. The layout was linear.  The HTML itself could only provide a Teletype model for layout of pages.  Headline banners in websites were followed by edge-to-edge text with blank spaces for separators.  It imitated the paper document on the screen with none of its flexibility. There was a lot of dissatisfaction among the web designers and an outcry for a language and a browser that would give more flexibility and scope for innovation.

However, the mosaic browser, made designers more aware of the shortcomings of the HTML language.  Graphics were used as inline images and were part of the flow of the HTML document, but were extremely difficult to control.  A few innovative designers began controlling the graphics using transparent graphics to create white space on the page.  This led to thoughts on how to define the height and width of the graphic and all the issues relating to x, y and z indexes that were later resolved in the Cascading Style Sheets.

In 1994 the W3C consortium was established with the view to set goals and standards for the future development of the language of the Web—HTML.  A number of versions of HTML were churned out.  Each version was an improvement over the other, but there were no standardization norms that were adhered to.  This resulted in a hot debate over the merits of the different versions and the need to implement standardization norms.  Microsoft and Netscape meanwhile forged ahead adopting HTML 3.0 as their standard and developed their browsers forcing compliance on the web designers. They responded to the market demand for structures that will help designers format their web pages more precisely.  They also did not hesitate to violate the Standard Generalized Mark-up Language (SGML) content rules in the process. (NOTE: This language pre-existed HTML and was not very popular because it was not designed for easy implementation.  It was adopted by HTML for content formatting). HTML Version 3.2 acknowledged these deviations and brought in some standardization of the language.  

Web technologies too improved during this period and several new design features began to emerge.  Icons replaced words, tiled images appeared in backgrounds, bevelled buttons with edges adorned the pages, banners were used in place of titles and top to bottom, bullet list menu driven systems emerged enabling the presentation of hierarchical information. However, the web designers were more obsessed with technology rather than content. The web page was a battlefield of flashy banners, buttons, colours and objects!  Very few web designers made efforts to create well-structured layouts for their pages.  The revolution happened only when table tags were introduced into HTML for statistical purposes and remained to service the designers who wanted to bring order into the chaos of their pages. Positioning of elements within tables became a very important aspect of web design. 

The table brought context and structure to the table data and provided for systems for incremental display and display for non-visual display agents(Braille based browsers).  At a very basic level tables are made up of cells that are arranged into rows and columns.  Display characteristics can be controlled at the table level or cell level or row/column level.  The HTML tags provides for many tags for controlling the display characteristics.  However, browsers still continue to have their own methods of interpreting the tags and hence the display differs from browser to browser.  HTML 4.0 deprecated many of the table formatting tags in favour of achieving the same effects with style sheets.  Browsers nevertheless continue to support the tags.

Tables come with their own frustrations and headaches.   The code becomes potentially complex and a single missing tag can destroy the table display and cause chaos.   Tables that display in one browser well, begin to look like a jigsaw puzzle in another browser.  The text size can also play havoc on the table display and this varies from user to user and the designer has very little control over it.   Form elements too display erratically in browsers depending on the settings preferred by the user.  Another major problem that is faced is the “unwanted white space creep” in tables. 

Additionally in Netscape Navigator has a predilection to collapse empty cells and it will not render background colour of the collapsed cell.  So designers who want to use empty cell spaces for design purposes will have to fill it with something if the page has to render perfectly.

Netscape Navigator 2.0 introduced frames at this juncture.  Frames allowed designers to divide the browser window into multiple smaller windows –each displaying a different HTML document.  This worked well in Internet Explorer 3.0 and higher too.   This new methodology of presenting elements on a web page had its advantages as well as disadvantages.   The main advantage of frames was that they enabled one part of the web page to remain static while others could be scrolled.   They unified the resources from separate servers and alternate content could be added with ease using the <noframes> tag.  However, this construct was not supported by older browsers.  It made the web page design more complicated and users could not bookmark individual pages.  The number of pages on the browser window also increased the load on the server and resulted in low downloading speed.  These framed documents also became a problem for the search engines and the pages could not be tracked if they are a part of a framed document.

While Netscape Navigator and the Internet explorer attempted to define their own rules of the game, standardization remained a distant dream. Resolutions of different monitors could only be second guessed. Colour schemes continued to be diverse and downloading time was extensive.  While font and type set could be defined on the browser the vertical and horizontal spread of the text also could not be completely controlled by the designer. As a result, web designers still could not deliver text that was legible, readable and clear on the monitor and graphics that were attractively displayed.

This limitation prompted many designers to adhere to the philosophy that information must be presented from the designers point of view as compatibility with the different browsers was a technology issue that must be handled by the designer. Closely allied to this was the belief that the site’s objectives were of paramount importance and the site must aim to draw the visitor in and inform him instantly of the reason for its existence.  So techniques of presentation assumed importance.  Navigation systems and site structure gained focus.  It was felt that Web design must evolve to use the rapidly changing technologies such as multimedia, animation, database integration, ecommerce and 3 D worlds(VRML). 

Therefore, Dynamic HTML marked this phase of development of the web page. Positioning techniques and use of Cascading Style Sheets in Dynamic HTML offered more flexibility to the designer.

HTML 4.0 was completed in 1997.  Style sheets were added and efforts were made provide support for internationalization (such left to right alignment of text, the LANG attribute etc).  Richer tables and forms were introduced.  Scripts and object tags for multimedia were incorporated.  The flavour of the HTML(transitional, strict and Frameset) was indicated at the beginning of the document to enable the browser or validator parse the code.

In 1999, HTML 4.01 made preparations for integrating XHTML into its warp and woof of HTML. This resulted in cleaner HTML.  The document was properly formatted, tags were well nested and it was easier to introduce changes to the document. XHTML combines the flexibility of HTML and the extensibility of XML. Tags can be defined and deployed on the fly and with XHTML, if you find a need for a new mark-up tag; you simply define it in an XHTML module and use it in your page as you would any other HTML tag. You can also use XHTML to mark-up the code as appropriate for the (XHTML compatible) browser that is viewing it. You are also in a better position to understand the different types of degradations that happen in different browsers due to unsupported tags.  Standards are being evolved to handle the degradation gracefully by turning off the tags and providing alternates for those browsers, which cannot parse the tags. 

Cascading Style Sheets to the Rescue:

Cascading style sheets were a welcome relief to the web designers frustrated by the control over design provided by HTML.   The style sheets for the first time allowed the designer apply typographical styles and spacing instructions for elements on the page.  The term cascading was used to refer to a situation where several sources of style information compete for control over the elements on a page.

Cascading Style Sheets were first created and integrated with web design with the laudable intention of separating Style from content.  The Style in Cascading Style Sheets refers to the definition of colours, fonts and positioning of elements on a web page.  Each style is defined with a unique name called the selector and this name is used to invoke and activate the specific style in the HTML document. 

W3C devised a hierarchical system for assigning weights to each type of style element in CSS.  These sets of rules were used to resolve conflicts between different style sheets that simultaneously affect the presentation of a single document.  More specific rules could override the general rules set for the site so that particular pages could be modified to suit the theme therein.

The CSS enables the web designer define the look and feel of the page in one place.  Thereafter it is easy to change the look and feel by changing the attributes in the style sheet.  Font sizes and other text attributes can be defined accurately as in a word document.  HTML tags also can be redefined; Links can be customized or layers can be built into the web page using CSS.  The web pages also load faster as the CSS is only loaded once when the visitor enters your site, while the HTML gets loaded for each page

HTML by default produces a linear style of positioning elements known as “Static” positioning.  Elements could not be taken out of this “Normal flow” and positioned elsewhere on the page.  Nor could specific properties be defined for the various containers or boxes that make up the HTML page.  A change in the style of presenting any one element on the Web page required ploughing through volumes of code.  CSS codes were written independent of the HTML code and were called up from within the code.  Styles could then be independently and globally edited without ploughing through volumes of code.

CSS enabled designers specify traditional typography attributes such as font size, line spacing, and letter spacing and offered methods for specifying indents, margins and element positioning.  It separated style from content and enabled the creation of potentially smaller documents that downloaded quickly.  It made for easier site maintenance.

One major drawback for CSS was the possible lack of browser support.   Versions of Browsers earlier than Internet Explorer 3.0 and Netscape Navigator 4.0 do not support style sheets.   Also there is no consistency of support among browsers that claim that they do support CSS.   However, web designers still see a lot of advantage in using style sheets.

CSS provides a number of rules that allow the designer specify the x and y coordinates for an element or its attributes. These rules can be applied to an HTML document as inline style directions or as style embedded at the top of the HTML or as an external file that can be linked to or imported into the document.

Inline style information can be added to an individual element by adding the Style attribute which is a standard style declaration.  This is equivalent of the <font> tag and they are still attached to individual elements and are as cumbersome to modify as the <font> tag of the HTML.   A sample of the Inline style is shown here:

<H1 STYLE= “Color: black”> This heading will be shown in black</H1>

The embedded style sheet is a more compact method.  The style element is used at the top of the HTML document as under:

<HTML>

<HEAD>

<STYLE TYPE= “text/css”>

<!—

     H1(color:black)

     P( font-size: 14 pt;

         Font-face: Times New Roman)

-- >

</STYLE>

<TITLE> Style Sheets</TITLE>

<HEAD>

……

<HTML>

The <! and --> tags hides the style element from browsers that don’t support style sheets.

External Style Sheets are the most powerful of the three types of Style sheets.  This enables the web designer put all style elements together in a single style sheet document and reference it from all pages in a web site.  This reference can be done either by linking to the document using the <link> tag in the <head> of the page or by importing the style sheet into the <style> element using the @import function.

Sample of Linking:

<HEAD>

<LINK REL=”STYLESHEET” HREF= “/pathname/stylesheet.css”

TYPE= “text/css”>

</HEAD>

Sample of importing:

<STYLE>

@import url(http://pathname/stylesheet.css);

</STYLE>

An important aspect of style sheets was the inheritance concept.  The style properties are seen as passing down from a parent element to a child element or to any element contained with the child element.  This enabled designers to define attributes for the parent elements and override them wherever required for the child elements. This made for more efficient style specification.

In 1997 W3C came up with a working draft of specifications for style sheet properties for positioning elements on the page and in three dimensional spaces.  The effort was initiated by Netscape and Microsoft. This was taken further in CSS 2 which was released in 1998.

Positioning in Style sheets is a rich and complex topic and will be taken up in greater detail in the later chapters of this book.  For the present we shall briefly look at the concepts of positioning at 35000 feet. The positioning of an element could be fixed, absolute or relative to the containing blocks and could also be made independent of the containing block. A fixed element will remain at the same location on the window while an absolutely positioned element will be taken out of the normal flow of the document and the space it occupied in the original static flow will be given up. The relatively positioned element appears as part of the normal flow and it is positioned on the basis of the coordinates specifically defined while its place will be retained in the static flow.

The type of positioning that you will need to use will depend on the layout of the content and the purpose of the document. Combinations of positioning properties may also give you advantages of manipulating multiple items on the page.   

DHTML which developed later was a combination of HTML, Javascript, CSS and Document Object Model.  Today there are a number of visual editors which enable you to create both CSS and DHTML. 

The XML/CSS combination is expected to bring simplicity back into web design.  While the former will help web designers create powerful content the later will help them create attractive styles!  However, Jon Bosak had some observations to make on the limitations of CSS in the context of HTML in his presentation on 11^th April 1997 at WWW6:

• CSS cannot grab an item (such as a chapter title) from one place and use it again in another place (such as a page header).
• CSS has no concept of sibling relationships. For example, it is impossible to write a CSS stylesheet that will render every other paragraph in bold.
• CSS is not a programming language; it does not support decision structures and cannot be extended by the stylesheet designer.
• CSS cannot calculate quantities or store variables. This means, at the very least, that it cannot store commonly used parameters in one location that is easy to update.
• CSS cannot generate text (page numbers, etc.)
• CSS uses a simple box-oriented formatting model that works for current Web browsers but will not extend to more advanced applications of the markup, such as multiple column sets.
• CSS is oriented toward Western languages and assumes a horizontal writing direction.

However, the W3C working group which is committed to XML is attempting to develop a simplified version of the DSSSL standards. They aim to provide more layout and document presentation features for CSS2.  Nevertheless, there is a hot debate on whether XML should be used in combination with CSS or with XSLT because CSS cannot be used to modify the XML document structure whereas XSLT enables designers to do just that!

W3C working group responsible for the XML standard is concentrating its efforts on the implementation of a simplified version of the DSSSL standard, DSSSL Online (DSSSL-O). DSSSL-O promises to provide far more layout and document presentation features than CSS, but is a considerably more complex standard and may prove difficult to implement.  

CSS is scripting language independent and can be used in combination with a number of scripting languages.  The effort is to establish CSS 1 as an interoperable style sheet language for the web and to establish an interface with scripting languages and to take advantage of some of the positioning features of both CSS and scripting languages.

Web design has finally arrived.  Today the new versions of browsers provide the controls that designers yearned for. The designer has more flexibility and can position his elements with greater accuracy than he could in the original HTML using CSS, XML or XHTML.