This article explores the following examples:
- A simple menu system.
- A scrollable data grid complete with column headers and row selection.
Quick Recap of the Web Server/Web Page Cycle.
Figure 1 shows the simplified logical architecture of the cycle for a Web browser to request and send information .to a Web Server.
HTML supports various properties such as height, width, font color, and often borders. You can set properties directly in HTML or you can use style definitions, which you’ll find are similar to styles in Microsoft Word and they’re easy to reuse. Using styles has become so prevalent in browsers that they have become the desirable way to set the look and feel. Styles have even been expanded so that they offer more options than are available in HTML itself.
You can specify a style in many ways the following methods are all equivalent ways to set the font and color of a tag:
(a) Attributes of a tag
(b) Inline style properties
(c) Referenced style tag properties
Style sheets provide a way to define groups of styles for your Web page. You can make them specific to certain tag names and you can apply them automatically or you can make them generic and apply them to any tag explicitly. You can include these definitions in a Web page itself using the style tag or in a separate .css file. In the latter case you can link them to the primary Web page by including a LINK tag as follows:
For example, to automatically set all SPAN tags in the page above to have a black border around them you could add the following to your style sheet:
To be specific, a tag has to declare itself with a particular class. For example, the Home button uses the Style class named CurrentOption as follows:
You can make very robust style sheets. They can include multiple levels of hierarchy and filtering. A wide variety of properties are available for you to set by using styles, including positioning, borders, fills, fonts, colors, and more.
You can build your own objects using containment. These objects require creation using the NEW keyword and I’ll cover them later in the whiteboard example.
(a) Overloading an anchor tag to do something other than linking. (The 'void' in the line ensures that the page does not refresh or attempt to navigate):
(b) Inline directly on the tag:
(c) Script bound to an event through the script tag attributes: