Separation of Layers of Webpage Code
By Stephen Bucaro
One thing that is almost a sure bet in webpage design is that eventually someone will
be required to make changes to a webpage. In addition to the content (text, images, links,
etc.) all webpages contain code that defines the structure of the webpage (html or xhtml),
and most contain code that defines the presentation of the webpage (CSS) and the behavior
manner making future changes very difficult, or you can separate your code into functional
layers, making future changes very easy.
The chart above shows the content as the bottom layer or foundation of a webpage. The
content is the text, images, links and other information that gos on the webpage. In large
organizations the content is written by totally different individuals that those that
design the layout of the webpage. The webpage designers use html or xhtml code to
structure the webpage. Html code defines the headings, paragraphs, tables, and so on that
control the layout of the webpage. In most cases (but not always) the html and content are
together on the webpage.
In the old days, html was used to define the presentation of the content on the
webpage. For example the font, text color, and background color or image was defined by
html tags. Many webpage designers and webpage development tools still use html tags for
this purpose. However, most html tags that define presentation are deprecated. Deprecated
means about the same thing as "obsolete", so don't count on future web browsers supporting
Modern webpage designers use CSS (Cascading Style Sheets) to define these visual
aspects of the webpage. CSS is also frequently used for structural purposes such as
positioning. CSS allows the webpage designer to define the presentation in a separate
layer than the content. This is accomplished by giving each html element a class attribute
or an id attribute and then defining the font, color, border, background, and other visual
elements of the html element in a style code block.
The advantage of using a style code block as a separate layer from the content and html
is that styles for a webpage or an entire website can be maintained in one area. For
example a single style sheet can contain the styles for an entire website, and this style
sheet can be linked to every webpage in the website. To change a style for every page in
the website the webpage designer need only make a change to one style sheet.
In the old days, webpages were static. Once the webpage was displayed by the web
give a webpage the ability to change without requiring an access of the web server. These
changes or behaviors are usually programmed to be as a result of the user clicking or
moving the mouse. An action or event can cause anything from content to change, to complex
even be used modify CSS properties, thus changing the presentation.
In large organizations the webpage programming is perfomed by totally different
individuals that those that design the layout of the webpage. To keep the webpage layout
a separate layer from the html and styles for a webpage. The advantage of using a