HTML: Physical Layout of Internet Content

HTML as an Object-Oriented Structure

Relevant HTML Elements

Anchor/Link

Line break

Form and Form Elements

Font

Table

Frame

Plugin/ActiveX

Java

Image

Map and Area

Layers

Style Sheets

Selecting Appropriate Design Frameworks

Known Browser Bugs

What to do when only one browser supports your content

HTML:

Physical Layout of Internet Content

For media specialists, designers and programmers, this is an important base point from which to begin understanding how to treat HTML as an Object-Oriented Structure. For media specialists and designers, awareness of how to treat content as objects will influence naming conventions, layout, and interactivity features. HTML is unavoidable for the programmer, as all JavaScript is eventually transformed into markup before it is presented. Thus, it is important for coders to be as familiar with its syntax as with JavaScriptís.

HTML as an Object-Oriented Structure

In the diagram below, the HTML page is the largest object. Above it is a HEAD, and beneath it to the left is the BODY and its constituent parts; on the right is the FRAMESET and its constituent parts. Notice beneath the principal objects, additional hierarchies are visible. The FRAMESET contains two frames and another frameset, which also contains two frames. Each frame has a body with its own structure.

Beneath the BODY are DIV elements. These do not have to be present, but they add to interactive control of the page that will be used later. Beneath the level of the DIV are tables, which in turn contain elements such as images, text, form elements, applets, and others.

Object Oriented View of HTML Page

Relevant HTML Elements

The HTML elements included are based on their ability to be integrated into the Object-Oriented development approach that we are developing. Elements such as DL and UL which are very useful and will be used here are not reviewed, as they do not impact the approach taken here. Some, such as <TABLE> and <BR> have particularly useful functions in OO design, even though they are not part of the browser DOM.

Discussion of style sheets and CSS properties will be presented at the end of the chapter. Suffice it to say that most HTML elements that concern fonts, including H1 through H6, EM, A, TD,TH, and many others give you the ability to include a STYLE attribute with an inline style description; a CLASS or ID attribute referencing a defined style; an element style definition affecting all like elements; or any combination thereof.

The elements below are presented in the order of their availability to browsers. When designing for one or more browsers, it is important to know which tags (or objects, for our uses) are available. No platform-specific structures will be presented or used. CD-ROM-like functionality is achievable in version 4 browsers using HTML and JavaScript. Interactive animation, dragging-and-dropping, scrolling backgrounds, and more will be revealed, building on cross-browser code foundations.

HTML Elements for Cross-Browser Object-Oriented Programming
Element Name	HTML	Comments
Anchor/Link	<A>	The A element is used for hyperlinking and naming local links. It can also be used to trigger JavaScripts.
Line Break	<BR> <P>	Among the first HTML elements, used for spacing and special purposes.
Form and Form Element	<FORM> <INPUT> <OPTION> <SELECT> <TEXTAREA>	Available in all browsers, form elements provide one of the primary way for users to interact with Internet applications.
Font	<FONT>	Used presently to maintain compatibility in older browsers.
Table	<TABLE> <TR> <TH> <TD>	The table provides a method of having pixel-perfect positioning within a window, layer, or frame. Newer browsers support background color and image properties.
Frame	<FRAMESET> <FRAME>	Frames provide a way to have separate HTML documents in a single HTML page. This enables some content to remain stationary while other content scrolls.
Plugin/ActiveX	<EMBED> <OBJECT>	With LiveConnect and ActiveX, the EMBED and OBJECT elements provide ways for authors to pass data between the browser and third-party software.
Java	<APPLET>	The APPLET element provides a way for authors to pass data between the browser and Java applets.
Image	<IMG>	Available in early HTML, but not to JavaScript. Since version 3 Netscape and version 4 IE, the SRC attribute can be changed dynamically.
Map and Area	<Map> <Area>	The Map element and Area element work together to provide Image map functionality to an Image that has the ISMAP and USEMAP attributes.
Layer	<LAYER> <DIV>	The layer, best accessed through the cross-browser DIV element, provides pixel-perfect positioning of content. X,Y, and Z positioning is available.
Style Sheets	<STYLE>	Style Sheets have been around since the version 4 browsers. They provide typographic and positioning control.

Anchor/Link

There are three primary uses here for the A element. First, as is commonly used, to link to a point in the same document or another document. Second, as a locally defined point to be made available to other A elements. Finally, as a means of executing JavaScript, which will be its primary purpose here.

Anchor/Link Element Attributes and Descriptions
Attributes	Descriptions	Default
HREF	URL to which the link connects (can be javascript:functionName() or mailto:emailAddress as well as http://www.somewhere.com).	None
ID	Unique identifier for the element. It can also be used to define style sheet properties.	None
Name	Name of element. Particularly important when the A element is used as an anchor.	None
Target	Frame or new window target of the link element.	The same window/frame.

Line Breaks

There are other instances where they can be of use for browser-specific content where the table tag is supported. In Communicator, for instance, any text string contained within an element that has a text-align setting in its CLASS attribute description has a carriage return after the closing tag similar to the H1 through H6 heading tags.

Example 1: Old Days Using Table TR TD and BR P combinations
Code	Rendered HTML
<table> <tr> <td>cell 1,1 info<BR></td> <td>cell 1,2 info<P></td> </tr> <tr> <td>cell 2,1 info<BR></td> <td>cell 2,2 info<P></td> </tr> </table>	cell 1,1 info cell 1,2 info cell 2,1 info cell 2,2 info

Example 2: Current Usage with Styles
Code	Rendered HTML
<style> .s1{text-align:left;font-size:18px} .s2{text-align:left;arial;font-size:14px} </style> <script> if(navigator.appName=="Netscape"){ document.write("<a class=s1>"); document.write("Chapter 1</a>"); document.write("<a class=s2>"); document.write("Section 1</a>"); }else{ document.write("<a class=s1>"); document.write("Chapter 1</a><br>"); document.write("<a class=s2>"); document.write("Section 1</a>"); } </script>

Line breaks (and their neighbor, the horizontal rule) provide unique positioning functionality to the designer. Although style sheets and new positioning features have made great advances for typographic and layout control, these elements will continue to have an importance for a number of reasons that will be made clear later in the text.

<BR> <HR> and <P> Attributes
Element	Usage	Attributes Descriptions Default
BR	Inserts line break with no space between lines.	CLEAR Inserts text following the BR element after aligned content (ALL, LEFT, RIGHT). None
HR	Inserts horizontal rule.	ALIGN Aligment of the Horizontal Rule Center CLEAR Inserts text following the Horizontal Rule after aligned content (ALL, LEFT, RIGHT). None NOSHADE Darkens in the rule, so as to remove 3D effect. Off SIZE Height of the Rule in Pixels 2 WIDTH Width of rule expressed in pixels or percentage 100%
P	Inserts line break with space between lines.	ALIGN Aligns text following the P element (ALL, LEFT, RIGHT). Left

Form and Form Elements

Unlike contents of other HTML elements, such as H1 through H6 heading tags, most form elements can be manipulated during runtime in all browsers. This makes them important to the Object-Oriented Content Developer for interactive uses; as user input or feedback. A shopping cart may provide user-defined color settings that they offer through a drop-down selection list. A Mario-type board game may have a text input box that tells you which level youíre on.

All form elements are contained within the FORM element. Its attributes and descriptions are provided below:

Form Attributes and Descriptions
Attributes	Descriptions	Default
Action	URL where form is submitted. Use none if the form is used for client side JavaScript only.	None (page reload, or execute JavaScript)
Enctype	Sets MIME type for the submitted data. Uses "multipart/form-data" for file, and "text/plain" for email URL addresses (ACTION=mailto:).	application/x-www-form-urlencoded
Method	HTTP method of form being sent (Get or Post)	Post
Name	Name of form element.	None
Target	Frame or new window target of the form action.	The same window/frame.

For many uses, the ACTION, ENCTYPE, METHOD, and TARGET attributes can be omitted. Many client-side applications, such as games and tree-like navigation systems, use Forms that are only for interaction at the browser. In these cases, the purpose of the form is to supply information to the Internet application that will be used without accessing a server. The Name attribute is not required, but is recommended, especially for larger projects.

The form elements are INPUT, OPTION, SELECT, and TEXTAREA. There are nine types of INPUT elements, and two types of SELECT elements. The nine elements below are referred to using the INPUT tag. These are:

Input Element Types
Input Type	Usage	Attributes Descriptions Default
Checkbox	Select one or more choices among one or several.	CHECKED Determines if Form Element is selected 0 (unselected) NAME Name of Form Element None TYPE Defines input type None VALUE Value of Form Element None
File	For uploading a file.	NAME Name of Form Element None TYPE Defines input type None
Hidden	Used to pass information that the visitor cannot see, like user ID.	NAME Name of Form Element None TYPE Defines input type None VALUE Value of Form Element None
Image	Provides an image as a form element	ALIGN Anchors image relative to surrounding elements Inline (none) BORDER Defines pixel thickness of image border 1 or 0 NAME Name of Form Element None SRC URL location for image None TYPE Defines input type None
Password	Hides keyboard entry from view as people input information	MAXLENGTH maximum number of characters Unlimited NAME Name of Form Element None SIZE Width of Form Element in number of characters Browser-specific TYPE Defines input type None VALUE Value of Form Element None
Radio	Select only one among two or more.	CHECKED Determines if Form Element is selected 0 (unselected) NAME Name of Form Element None TYPE Defines input type None VALUE Value of Form Element None
Reset	Return form to default values	NAME Name of Form Element None TYPE Defines input type None VALUE Text displayed on Form Element None
Submit	Submit form data	NAME Name of Form Element None TYPE Defines input type None VALUE Text displayed on Form Element None
Text	Single line text input.	MAXLENGTH maximum number of characters Unlimited NAME Name of Form Element None SIZE Width of Form Element in number of characters Browser-specific TYPE Defines input type None VALUE Value of Form Element None

In addition, there are also the OPTION, SELECT, and TEXTAREA elements.

Other Form Elements
Element	Usage	Attributes Descriptions Default
Option	A single selection within a select element	Selected Determines if Form Element is selected 0 (unselected) VALUE Value of Form Element None
Select	The select element contains two or more options.	MULTIPLE Determines if select list is more than one line (pull down) NULL (not true) NAME Name of Form Element None Size Number of visible lines in select list 1
Textarea	Similar to the text input element, the TEXTAREA provides a multiple line feature, including text wrapping.	COLS Width measurement in number of characters Browser-specific NAME Name of Form Element None ROWS Height measurement in number of characters None VALUE Value of Form Element None WRAP Determines whether or not the text automatically wraps Browser-specific

In the following table, an example of each form element is provided. In several instances, multiple examples are provided to demonstrate the different type of form element settings. These should be able to be copied and pasted into pages with minimal edits. The convention used here is one where quotation marks are avoided, as these will be used later in JavaScript documents. When HTML is deconstructed for JavaScript, quotation marks have to be managed in one fashion or another. Unlike XML, which forces quotation marks, I prefer the other alternative; none where possible.

No JavaScript is built into this page, but later it will be demonstrated how the different form elements can pass information to each other, and for other uses in Internet applications, using JavaScript. Updating the Hidden field, for instance, would require some programming on the client or server side.

Font

When dynamically generating HTML pages through JavaScript, there are often opportunities to use the FONT element and STYLE descriptions for browser-specific content. If you are looking to include browser, operating system, version, or other type of client-specific testing for a page, make sure you include the property in an object description of the page. For instance, in a page with an image, a heading, and descriptive text, we now include the abstract property "typographicSpecification." Later, we will look how to define these properties, but for the moment, it is important to be aware that a page that is considered as an object may have properties in addition to visible or otherwise obvious ones.

Font Attributes and Descriptions
Attributes	Descriptions	Default
Color	Hexadecimal or special color name	Same as TEXT setting in BODY element
Face	Font face name; can be a comma-delimited list where it searches from the first font until it finds one	Browser default
ID	Unique identifier within document. Used to give version 4 CSS definition and version 3 font face definition.	None
Size	Browser-specific font size; 1 is smallest, 7 is largest.	3
Style	Used with the FONT and many other elements to provide CSS descriptions to string contents.	Browser default

Table

There are four primary elements associated with tables: the TABLE, TR, TH, and TD. Another element, CAPTION, is also available, but not advised due to browser inconsistencies. Other elements are browser-specific and will not be included here. Tables are built one row at a time; having all cells accounted for in a row definition before moving to the next. The TH, or Table Heading, is generally center-aligned and bolded; while the TD, or Table Definition, is generally left-aligned and in plain text. To affect typography within a Table, use the type of cell (TD or TH) as the name of the style that you are defining, as in the example below.

Notice that the TH element has additional descriptions that are added to the first line of its style description. Below are the TABLE elements and attributes.

Table Elements and Attributes
Element	Usage	Attributes Descriptions Default
TABLE	Container of elements that fill a defined rectangular region.	ALIGN Sets the Table's alignment relative to the container outside of it (usually a BODY, DIV, or TABLE element) LEFT BACKGROUND Sets a background image for the table. This is available in version 4 browsers. None BGCOLOR A hexadecimal or defined color name. Available in version 3 browsers. None BORDER Sets the border in number of pixels. None BORDERCOLOR A hexadecimal or defined color name. Requires a BORDER setting of 1 or more. Available in version 4 browsers. None CELLPADDING Sets the number of pixels between the cell content and the cell border. 0 CELLSPACING Amount of space between table cells. Varies by browser COLS This sets the number of columns in a table independently of its contained elements. This is only available in version 4 browsers and is not recommended. None HEIGHT Sets the height of the table in pixels or as a percentage of the height of the Table's containing element. Varies by browser WIDTH Sets the width of the table in pixels or as a percentage of the width of the Table's containing element. Varies by browser
TD/TH	The table definition and table heading are containers within a table for positioning content. The table heading is usually bolded and center-aligned, compared to the left-aligned, plain text table definition.	ALIGN Sets the horizontal alignment of the cell's contents. Left (TD) Center (TH) BGCOLOR A hexadecimal or defined color name. Available in version 3 browsers. None COLSPAN Defines how many columns are occupied by the cell. 1 HEIGHT Sets the height of the cell in pixels. Varies by browser NOWRAP Prevents the cell from wrapping its contents. Off ROWSPAN Defines how many rows are occupied by the cell. 1 VALIGN Sets the vertical alignment of the cell contents. Middle WIDTH Sets the width of the cell in pixels or in percentage of its container's width. Varies by browser
TR	The table row is used to delimit content within a table element.	BGCOLOR Hexadecimal or color name. Defines the background color of the row. This color appears between the cell content and the cell border when the cell color is also set. Version 4 browsers. None

Frame

Layers and Frames can be used together, but layers cannot move across frames. Containing tables within frames will help you to place your content exactly within its window. There are some browser bugs, especially Netscape, when it comes to pixel-perfect positioning within frames. These will be discussed below with some design workarounds.

Frame and Frameset Elements and Attributes
Element	Usage	Attributes Descriptions Default
FRAME	Container of elements that fill a defined rectangular window.	BORDERCOLOR If the FRAMESET has a border, this sets the border color to a hexadecimal or text color. This is for version 4 browsers only. None FRAMEBORDER Determines whether or not a border is visible around a frame. Yes MARGINHEIGHT Although this is a Microsoft IE only setting, it is required in cross-browser authoring. It defines the number of pixels between the top and bottom of framed content and the frame border. 14 PC; 8 Mac MARGINWIDTH Although this is a Microsoft IE only setting, it is required in cross-browser authoring. It defines the number of pixels between the left and right of framed content and the frame border. 14 PC; 8 Mac NAME The name of the frame None NORESIZE If present, the frame cannot be resized. False SCROLLING Determines whether or not scrolling is possible. Values are AUTO, NO, and YES. Auto SRC The URL of the frame. This can be a "javascript:functionName()" addresss. None
Frameset	Container of frames within a window. A frameset defines a rectangle that has either a COLS attribute or a ROWS attribute, but not both. To create a grid-like structure, framesets need to be nested. A frameset can only contain frame or frameset elements.	BORDER Determines the pixel thickness of borders within a frameset. Only recommended setting is 0. Varies by browser. BORDERCOLOR If the FRAMESET has a border, this sets the border color to a hexadecimal or text color. This is for version 4 browsers only and is overridden by contained framesets or frames. Yes COLS Defines how much width is provided to each frame or frameset within the frameset. The sum of values must equal 100% of the size of the frameset. Value can be pixel, percentage, or wildcard(*) character that represents all leftover space. None FRAMEBORDER Determines whether or not frames within the frameset are separated by borders. Yes FRAMESPACING Although this is a Microsoft IE only setting, it is required in cross-browser authoring. It defines the number of pixels between frame borders. Only recommended setting is 0. None ROWS Defines how much height is provided to each frame or frameset within the frameset. The sum of values must equal 100% of the size of the frameset. Value can be pixel, percentage, or wildcard(*) character that represents all leftover space. None

Plugin/ActiveX

Since version 3 browsers, scripting has been available for both. Netscape uses Java as an intermediary between the Plugin technology and the browser, which it names LiveConnect. The attributes and properties available depend on the vendor that provides the Plugin technology. Microsoft ported its OLE (Object Linking and Embedding) technology and brought it to the Web as ActiveX. It has a fairly standardized set of attributes and properties available to all Objects.

In a cross-browser approach, both require some fudging to reconcile incompatabilities or inconsistencies in coding syntax. There are several variations, but hopefully, the same source file is used in each, and differences between the two are smoothed over through HTML and JavaScript design. Below is an example of a Shockwave for Director file that uses both HTML elements.

It is recommended that the OBJECT element contain the EMBED element to avoid browser inconsistencies. In the example, you see how Internet Explorer uses the PARAM element to contain further description for the ActiveX control. Netscape does the same through attributes of the EMBED element. For most technologies, there are specific variable names that must be used on IE and Communicator; while some have flexibility. You should consult the developer documentation of technologies that you are looking to integrate into your application design. There is a list of Plugin/ActiveX developer sites in the Appendix.

When working with Plugins and ActiveX Controls in an Object-Oriented Development method, it is important to become aware of what properties and methods are built into them by their vendors. In addition to these built-in properties, these elements should be considered like any other, meaning that we can add properties to them as it suits our design needs. This will be revisited in the examples of using Object-Oriented programming with non-standard file types.

Below are typical attributes of the EMBED, OBJECT, and PARAM elements. The IE attributes for the EMBED element are not included, as these will be handled by the OBJECT element.

Plugin/ActiveX Elements and Attributes
Element	Usage	Attributes Descriptions Default
EMBED	Container of third-party software. Permits browser to see non-standard file types.	ALIGN Sets the EMBED element alignment relative to the container outside of it (usually a BODY, DIV, or TABLE element) None HEIGHT Sets the height of the plugin in pixels. None HIDDEN The presence of this attribute means that the Plugin will not be seen. Off HSPACE Sets a horizontal margin around the plugin in pixels. 0 HIDDEN The presence of this attribute means that the Plugin will not be seen. Off NAME The unique name of the Plugin. None PLUGINSPAGE The technology vendor's plugin downloads page. None PLUGINURL Using SmartUpdate, this attribute points to a JAR file that can download the plugin and install it without needing to leave the browser. Communicator ignores the PLUGINSPAGE attribute if this is included. None SRC The URL containing the content of the EMBED element. None TYPE The mimetype of the Plugin. This is not required, though it can be used to instantiate a Plugin without having a SRC file. None VSPACE Sets a vertical margin around the plugin in pixels. 0 WIDTH Sets the width of the plugin in pixels. 0
OBJECT	Container of third-party software. Permits browser to see non-standard file types. The attributes here are ones that correspond to those in Communicator and that are required for cross-browser development.	ALIGN Sets the OBJECT element alignment relative to the container outside of it (usually a BODY, DIV, or TABLE element) None CLASSID The URL using the "clsid:" protocol that points to the ActiveX control's location. None CODEBASE The pathname where the data or class files are located. None CODETYPE Defines the mimetype of the Object. None DATA The URL where the data for the OBJECT element resides. None HEIGHT Sets the height of the object in pixels. None HSPACE Sets a horizontal margin around the object in pixels. 0 NAME The unique name of the Object. 0 TYPE Defines the mimetype of the Object. None VSPACE Sets a vertical margin around the Object in pixels. 0 WIDTH Sets the width of the Object in pixels. 0
PARAM	The PARAM element provides attributes for the OBJECT element.	NAME The unique name of the PARAM element. None VALUE The value of the PARAM element. None

Java

In the browser, however, the APPLET is, as it sounds, a small application, and has access to a subset of system resources. Java is an Object-Oriented language, but that does not mean that the way that it is included in HTML pages is done in an Object-Oriented manner. For the Java programmer, the world ends at the frame of the Applet. There might be some interapplet communication, or some network communication, but it is rare for the Java programmer to stand back and see the Applet within the Object-Oriented setting of the HTML document. At best, it might occassionally be considered within the Browser DOM, but this does not suggest that it is considered within an Object-Oriented Design Structure.

To look at HTML elements from an OO Design Approach, all elements need to be accounted for in one way or another. It is not only the Applet, or the Plugin that matters. What function do the interface images have? What else besides the Applet or Plugin content is visible or unseen? Where does the document lie within the site navigation structure? Many times, the Applet or Plugin may be considered the Main Body area of the document, but this should be an explicit design feature, not just a result of placement.

Once the Applet is integrated into an OO design of the page, its functionality will be more natural and seamless. It may share properties with image rollover text or the status bar. It will likely be inserted into a page dynamically as will be looked at in the section on Reconstructing HTML. Its name and properties may be influenced by user interaction outside the Applet, but perhaps not requiring a network transaction. The Applet is open to JavaScript for two-way communication which makes local application development relatively straightforward. This will be explored later in the Frameworks section.

Following are the attributes of the Applet Element.

Applet Attributes and Descriptions
Attributes	Descriptions	Default
Align	Alignment of Applet relative to containing element.	None
Alt	A text message that appears in the rectangle of the Applet before it loads and in place of the Applet if it cannot display.	None
CODE	URL of Applet's initiaing Java Class file.	None
CODEBASE	Directory where the Class file defined by the Code attribute resides.	None
HEIGHT	The height in pixels of the Applet's bounding rectangle.	None
HSPACE	Sets a horizontal margin around the Applet in pixels.	None
MAYSCRIPT	The presence of this attribute enables the Applet to communicate with JavaScript.	None
NAME	The unique name of the Applet.	None
VSPACE	Sets a vertical margin around the Applet in pixels.	None
WIDTH	The width in pixels of the Applet's bounding rectangle.	None

Image

With the image element, interactive designers can change image content during runtime. This can support mouseover and mouseout image swapping, as well as animation, using JavaScript's built-in timing mechanisms (presented in the following section). The image is one of the most powerful elements available in cross-browser content design. It is a lightweight method of changing the screen content without refreshing an entire frame or layer.

The Image element attributes are presented in the following table:

Image Attributes and Descriptions
Attributes	Descriptions	Default
Align	Alignment of Image relative to containing element.	Left/Inline
Alt	A text message that appears in the rectangle of the Image before it loads and in place of the Image if it cannot display.	None
BORDER	Border around image measured in number of pixels.	0 or 1
HEIGHT	The height in pixels of the Image's bounding rectangle.	None
HSPACE	Sets a horizontal margin around the Image in pixels.	Varies by browser
ID	Unique name of the image element.	None
ISMAP	When present, enables the image to use an image map defined by the USEMAP attribute.	None
LOWSRC	The URL of a low-resolution image to load before the main image defined by the SRC attribute is loaded.	None
NAME	The unique name of the Image.	None
SRC	The URL of the image to be displayed within the rectangle defined by the IMAGE element.	None
USEMAP	Defines the image map used by the image. This attribute requires the ISMAP attribute to be present in order to be activated.	None
VSPACE	Sets a vertical margin around the Image in pixels.	Varies by browser
WIDTH	The width in pixels of the Image's bounding rectangle.	None

Map and Area

The Image map has been available since version 3 browsers. Often, images are cut up so that in addition to providing individual referencing, the image can be swapped during rollover and rollout events. In this case, an image map would not be used, in favour of individual images.

For Object-Oriented Programming purposes, the Map and Area elements are not very exposed to the Browser DOM. When we look at how to create HTML dynamically, it will become clear how we can create our own objects to help out with image mapping. Rather than think of how we do it, we'll ask what kind of thing do we need to achieve it.

The Map and Area elements and their attributes are presented below:

Map and Area Elements and Attributes
Element	Usage	Attributes Descriptions Default
MAP	Container of Area elements.	NAME The unique name of the image map. When locally referenced, use the "#" sign in front of the name in the USEMAP attribute of the Image element. None
AREA	Provides individual HREF information for a portion of an image.	COORDS The coordinates of the shape that is associated with the HREF attribute. None HREF The URL that is accessed when the area is clicked on. None NOHREF Defines the shape as an inactive region. None SHAPE Determines what kind of shape the Area occupies. Available values are rect, poly, and circle. RECT TARGET The frame or window which receives the returned HREF content. None

Layers

In the next chapter, differences between the naming of properties and methods available to the two browsers will be reconciled through JavaScript. From an HTML point of view, it's much easier. We will only be concerned with the DIV element, realising that it is the only cross-browser solution. Everything that you need to do with the Layers array in Netscape is still available using Netscape's syntax, the only difference is that the Layer contents are contained within the DIV element.

The term "Layer" still makes sense for conceptual treatment. It has a z-index property, can be individually moved or animated, and has other features that make the term natural. When the term is used here, it will refer to contents of DIV elements, unless expressly stated.

Among the more interesting style descriptions that the DIV element will use are its coordinate positions, and its clipping rectangle. The latter can be used to create spectacular effects; together with the former, scrolling panaroma animations and transition methods, such as wipe and replace, are achievable. These will be given considerable attention later.

The DIV element and its attributes are illustrated below:

Div Attributes and Descriptions
Attributes	Descriptions	Default
ALIGN	Sets the DIV element alignment relative to the container outside of it (usually a BODY or DIV element)	None
CLASS	References a Style description for typographic settings.	None
ID	References a Style description for positioning and typographic settings.	None
NAME	The name of the element. Recommended that it is the same as the ID.	None
STYLE	Provides an inline Style description for positioning and typographic settings.	None

Style Sheets

1. Through the LINK element in the HEAD section of the HTML document.
2. Through the STYLE element within HEAD or BODY section of the document.
3. Through inline STYLE attribute definitions.

Once the style has been defined, it can be accessed using the CLASS or ID attribute of HTML elements, if the style is not set to the element itself.

When styles are defined within the <STYLE> element, the style definition has curly braces ({ and })around it. When defined within a STYLE attribute, the style definition is contained within quotation marks. In both cases, the property name is declared, followed by a colon (:), then the value. The name-value combinations are separated by semi-colons (;). Within the <STYLE> element, these can be separated by carriage returns for easier reading (look at the source of this page to see an example).

The following elements and attributes are used to work with style sheet properties.

Style Syntax
Element	Example	Description
CLASS	<A CLASS="noUnderline">noUnderline</a>	Use the CLASS attribute to affect one or more elements in a common manner.
ID	<A ID=onlyMe>Only Me</a>	Use the ID attribute to affect one element in a specific manner.
<LINK>	<LINK REL="stylesheet" TYPE="text/css" href="theStyle.css">	Use in <HEAD> to make available to whole document.
<STYLE>	<STYLE> H1{font-family:Arial} .TDCenter{text-align:center} #myID{font-weight:bold} </style>	Affects all H1 elements Affects all elements with attribute CLASS = TDCenter Affects element with attribute ID = myID
STYLE	<h1 STYLE="font-family:Arial">	Use within element to affect element contents.

Below is a table containing properties that can be set for all version 4 browsers. Some values may not be supported in all browsers, but the base properties are available in all Mac and PC browser platforms. Not all elements support all properties. Particularly, background and border properties work best with specific usage settings.

Stylesheet Properties, Descriptions and Examples
Property	Description	Example
background-color	Sets the background color of the element. The TABLE element is used. Example: background-color:yellow	Yelllow Background
background-image	Sets the background image of the element. The TABLE element is used. Example: background-image:url(picture.gif)	Picture Background
border-color	Sets the border color of the element. The A element is used. Example: border-color:yellow	Yelllow Border
border-width	Sets the width of the element border. The A element is used. Example: border-width:5px	Border width=5
border-bottom-width: border-top-width: border-left-width: border-right-width:	Sets the individual border widths of the element. The A element is used. Example: border-bottom-width:10px; border-top-width:3px; border-left-width:20px; border-right-width:5px	Border widths: top:3, left:20, right:5, bottom:10
border-style	Sets the style of the element border. The A element is used. The border width needs to be set to an amount large enough for individual styles to be seen. Cross-browser values are double, groove, inset, none, outset, ridge, and solid. Example: border-style:double	Double border
clip	Sets the visible portion of the element. The default is the rectangle required to see the element entirely. The value for clip is a rect() expression. There are 4 values required. In order, these are: the number of pixels away from the top edge of the element that the top of the clipping rectangle ends; the number of pixels away from the left edge of the element that the right of the clipping rectangle ends; the number of pixels away from the top edge of the element that the bottom of the clipping rectangle ends; the number of pixels away from the left edge of the element that the the left of the clipping rectangle ends; A clip description, thus, looks like: clip:rect(20 180 80 20) For a 200 x 100 original area, this would clip it at each edge by 20 pixels (20 in from the top, the edge ending 180 pixels in from the left, the edge ending 80 pixels down from the top, and the edge ending 20 pixels in from the left). Example: clip:rect(20 180 80 20)	This text will be clipped by the clipping rectangle. This text will be clipped by the clipping rectangle. This text will be clipped by the clipping rectangle. This text will be clipped by the clipping rectangle. This text will be clipped by the clipping rectangle. This text will be clipped by the clipping rectangle.
color	Sets the fore color of the element. Example: color:red	Red Color
font-family	Sets the font family of the element. The A element is used. Example: font-family:Courier	Plain Text
font-size	Sets the font size of the element. The A element is used. Example: font-size:18px	18 pixel type
font-style	Sets the font style of the element. Possible values are italic and oblique, and require that the font-family has that style available. Bold is set with the font-weight attribute. The A element is used. Example: font-style:Italic	Italicised Text
font-weight	Sets the font weight of the element. Possible values are increments of 100 up to 900. The word "Bold" can be used, which has a weight of 700. Italic text is set with the font-style attribute. The A element is used. Example: font-weight:bold	Bolded Text Bolded Text Bolded Text Bolded Text
height	Sets the height of the element. Defaults to the height needed to display the element contents. This property is generally overridden by element contents. Use the clip property to make more or less of the element visible. Example: height:20px	This text is only supposed to be 20 pixels high. This text is only supposed to be 20 pixels high. This text is only supposed to be 20 pixels high. This text is only supposed to be 20 pixels high. This text is only supposed to be 20 pixels high. This text is only supposed to be 20 pixels high.
left	Sets the left edge of the element. Example: left:50px	This block is indented 50 pixels.
line-height	Sets the line-height of the element. The A element is used. Example: line-height:50px	You need to see a wrapped text element to really notice the line-height.
list-style-type	Sets the type for the list element. Possible values are The UL and OL elements are used. Example: UL Default list-style-type:circle list-style-type:disc list-style-type:square OL Default list-style-type:decimal list-style-type:upper-alpha list-style-type:upper-roman list-style-type:lower-alpha list-style-type:lower-roman	First Item Second Item First Item Second Item First Item Second Item First Item Second Item First Item Second Item First Item Second Item First Item Second Item First Item Second Item First Item Second Item First Item Second Item
margin	Sets the pixel width for a margin between the element border and adjacent elements, outside of the element. The TABLE element is used. This does not set well in Netscape. Height is added on top of the element before the margin. Example: margin:50px	Cell 2,2 has margin width=50 1,1 1,2 1,3 2,1 2,2 2,3 3,1 3,2 3,3
margin-bottom: margin-top: margin-left: margin-right:	Sets the individual margin widths of the element. The TABLE element is used. This affects the space outside of the element. Example: margin-bottom:30px; margin-top:60px; margin-left:50px; margin-right:20px	Cell 2,2 has margin widths Margin widths: top:30, left:60, right:50, bottom:20 1,1 1,2 1,3 2,1 2,2 2,3 3,1 3,2 3,3
padding	Sets the pixel width for a padding between the element container and the element content. Same as CELLPADDING of TABLE element. Example: padding:5px	Padding:15 No Padding
padding-bottom: padding-top: padding-left: padding-right:	Sets the individual padding widths of the element. The A element is used. Example: padding-bottom:10px; padding-top:3px; padding-left:20px; padding-right:5px	padding-bottom:10px; padding-top:30px; padding-left:50px; padding-right:20px a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z No padding a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z
position	Sets the positioning context of the element. Possible values are 'relative' and 'absolute'. With ABSOLUTE, you control the exact x-y location of content when measured from the top left pixel of the containing window or frame. With relative, this is set in relation to the containing element, subject to any additional property settings that it may contain. The DIV element is used. Example: position:relative	This text is left 50 top 60 This text is left 150 top 10
text-align	Sets the alignment of element contents. The TH element is used. Example: text-align:right	Text
text-decoration	Sets a text-decoration for the element. For most elements, the default is 'none'. For the A element with the HREF attribute, the default is 'underline'. The other possible value is "line-through". The A element is used. Example: text-decoration:line-through	Line-through
text-indent	Sets the number of pixels that the first line of text is indented. Use margin for affecting the entire element. Inconsistencies between browsers. The A element is used. Example: text-indent:72	This Plain Text should wrap with a 72 pixel indent on the first line.
text-transform	Sets the capitalisation of the text element. Possible values are UPPERCASE, LOWERCASE, and CAPITALIZE. The latter makes the first letter of each word upper case, while the first two do what their name implies. The A element is used. Example: text-transform:uppercase	This is a way to shout hello.
top	Sets the top edge of the element. Example: top:20px	This block is indented 20 pixels.
visibility	Sets the visibility of the element. Possible values are hidden, visible, and inherit. This is one of the most useful properties for interactive design. The DIV element is used. Example: visibility:visible	This DIV section is visible. The one below isn't. This DIV section is invisible. The one above isn't.
width	Sets the width of the element. This defaults to the width necessary to show all of the element contents. To change the visible area, use the clip property. Example: width:100px	This has a width of 100 pixels
z-index	Sets the z-order placement of the element. This is an important property for interactive design. This will often need to be changed while the user is interacting with the application. The numbers begin at 0 and can be thought of as transparency layers. Numbers can be skipped, and the highest number will be the topmost visible. Example: z-index:25	This is z index 25

Selecting Appropriate Design Frameworks

The real question should ultimately be determined by the content, and the audience browser capabilities. If your target is 50% version 3 and earlier browsers, moving to a layer-based design framework is not a likely option (unless you can make them all upgrade together, of course). On the content side, there are as many different approaches as there are reasons to support them. The chart below shows a comparison of functional uses of images, tables, layers, and frames.

Images, Tables, Frames, and Layers
Feature	Image	Table	Frame	Layer
Positioning	Only through using the HSPACE and VSPACE attributes. These add margins, nothing more.	Pixel-perfect, if the table is properly contructed. No control over starting position.	Controls an individually scrollable window. Can contain frames, layers and tables for additional positioning.	Controls an individual positionable section of content. Can contain layers and tables for additional positioning.
Content Refresh	Very fast, best with preloaded images.	No built-in refresh. The containing element (DIV or FRAME) must be refreshed to change table contents.	Fast, dependable for older browsers.	Fast, works only in version 4 and newer browsers.
Browser Targets	All version 3 and newer browsers.	All version 1 and newer browsers.	All version 2 and newer browsers.	All version 4 and newer browsers.
Restrictions	Few; only for oldest browsers.	Only as relating to its containing element.	Some pixel-positioning conflicts in browsers. Some nested framesets do not render correctly in all browsers.	Some nested layers do not render correctly in all browsers. Testing on multiple browsers is often required.
Biggest Benefit	Lightweight, built into most GUI editing programs. High impact, low effort.	Required at all most all levels for layout control.	Maintains static areas while others scroll. Allows state to be maintained.	Pixel-Perfect Positioning of content
Biggest Problem	GUI editors often only support their own code. Overreliance on image to perform other tasks.	Content within tables, especially nested, sometimes has problems rendering (usually plugin or other non-browser object).	Rendering between browsers is not always dependable.	Rendering between browsers is not always dependable.

There are some general guidelines that you can follow as influencing factors regarding your choice of design framework.

• What is the lowest common denominator for your browser target (e.g., version 4, etc.)?
• How will the documents be edited and shared by multiple authors?
• Are there parts of the page that should stay in place while others change?
• Do you want to have scrollable areas?
• Will you likely need to print?

These questions and more will be looked at in Chapter 6, once the introductory material has been presented.

Known Browser Bugs

• Navigator 3 and 4 do not let me bring frame contents to the border of the frame.
  • In some cases, this is true. Experiment with other frame configurations. If this does not help, rethink the design at the point of convergence. Is there any way for the source art to be slightly modified?
• Navigator and Internet Explorer show positioned framed content slightly differently
  • If this comes from Navigator's inability to align content to the frame border, there are a few possibilities: make duplicates of the few offending images for each browser; add one or more frames to absorb the shift between images; avoid nested framesets and experiment with different framesets; and use the DIV element around the content. Some or none of these may help.
• Defined widths are ignored by the TD or TH elements.
  • Use an image in an empty cell to establish the width. This is built into most GUI editors.
• IE Mac 4.5 Will Not let me scroll a layer
  • Rewrite the layer contents, instead of using the positioning and clip properties. See more in the following section.

What to do when only one browser supports your content

If you are knowingly using syntax that one or more browser(s) coming to your site will not recognise, there are a number of ways to support the 'browser-challenged'. A number of these are based on JavaScript and will be presented in the following chapter. HTML has a few possibilities for browsers to view other content. These are: