Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Separation of Layers of Webpage Code

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 of the webpage (JavaScript). You can dump all that code onto the page in a disorderly 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 those tags.

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 browser, what you see was what you get. But modern webpage programmers use JavaScript to 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 calculations to be performed on data the user entered into the webpage. JavaScript can 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 and content clean and organized, the JavaScript code is usually placed in a code block as a separate layer from the html and styles for a webpage. The advantage of using a JavaScript code block as a separate layer is that the JavaScript code can be maintained in one area.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268