Lecture Notes - Static vs. Dynamic Websites
This lecture notes contain the following:
Static HTML vs. Dynamic HTML
Static means two things:
- primarily this means the page doesn't import style and/or content from other sources
- also this can mean the elements on the page don't interact with the mouse when it rolls over them (other than possibly minimal interaction with links)
Dynamic means two things:
- primarily this means the page may be importing style and/or content from other sources, such as CSS files, databases, XML files, or other Web pages.
- this can also mean CSS, Javascript and/or Flash are present on the Web page so that there is a noticeable change to navigational bars or other items on the page when they are rolled over or clicked with the mouse.
Before CSS, the Static Model
In the 1990s, before the creation of CSS and the rules that govern its usage, Web pages were primarily static. In this context, static means Web pages that were meant for presentation only. They remain fixed and do not interact with the mouse when the pointer moves across the page. This is the way Web pages were first designed. They were static and content, structure and presentation were all part of the HTML script.
Presentation is defined as the style of the page. It includes things like font color, background color, font type, font size and other color and size elements.
Structure refers to the containers in the HTML code that can hold the content. In HTML terms, this means the <table>, <td> and <div> tags. It could also technically mean the <p> tags, <h1>, <h2>, etc. tags and other container tags that hold content inside or outside the other structural tags. For purposes of this class, when these instructions say structural tags, they mean <td> and <div> only.
Content refers to the actual text or images that sit inside structural or container tags.
Javascript was created to give more life to pages, but it was still very inconsistent, particularly due to the fact that browsers interpretted this script differently.
After CSS
With CSS and improvements in both Javascript and Flash, came a new model for Web page design. Javascript and Flash add exciting dynamic elements to Web pages, and some annoying ones as well!
CSS also incorporated some dynamic elements, such as what appear to be rollovers in menu item links, and the abilty to relocate structural elements on the page. CSS is used to format the presentation, and HTML or XHTML is used for structure and content of the web page.
Beyond CSS, the Dynamic Model
Many more Web pages are now being designed to separate all the elements from one another. This means that the presentation (CSS) is now loading into the viewer's browser at the same time as the XHTML Web page, and the content is even loading into the XHTML structure from a separate database or XML file.
As an example, Check out Google News, then check it out again in 20 minutes. Notice that the stories are updated automatically. The content of the news stories is coming from several different locations, but sorting into one Google News Web page for you, the viewer. Also, notice that the two column tabular structure of the site remains the same, but with updated content.
This is the dynamic model. Both presentation and content are separate from the XHTML and can be called on command through a combination of client-side and server-side scripts.
We'll look at more dynamic content, including Javascript and Flash throughout this course.