HTML.co.uk

Indenting means controlling white spaces, which is the most common problem with HTML. Almost all the web browsers condense or collapse multiple white spaces in HTML code, which means that a web page whenever will encounter or interpret an HTML, it will display multiple spaces (” “) exactly in a similar fashion as a single space (“ “). And this holds true not only for spaces but also for white space characters such as carriage returns (newlines) and tabs. Therefore, it is not important as to how you indent in HTML but how you reliably indent in HTML.

There are several possible solutions available which can effectively an reliably solve the problem of indenting or controlling white spaces such as non-breaking spacing, blockquotes, images, Netscape spacer tag, tables, preformatted text and bad list structures. The non breaking space is the character identity that most of the browsers honor as a white space and therefore multiple spaces will be treated as is with no condensing or collapsing to a single space. In case of non breaking space you do not require any special HTML structures for achieving the indent.

The non breaking space is very important to hold the table cells open or otherwise they will appear quite strange. Some browsers can still collapse the column to zero or nothing only when there are just the white space characters in the cells or if the table columns have nothing or details stored in them. Non breaking space can also be used to indent images and text but with the limitation of using them only in small amount. Some of the older browsers do not support more than one non breaking space in a row.

The use of PRE tag can be used for indenting spaces, line feeds and carriage returns as it is from the source code. This feature is supported by almost ALL browsers including the text-only browsers. The PRE tag indents not only a single text line but controls indentation for multiple text lines. Deeper indenting of HTML can be achieved using BLACKQUOTEs. Most of the browsers support this kind of indentation. Netscape has specifically created a tag for indentation in the HTML document. This tag is capable o producing vertical only or horizontal only or blocking white space. This tag can easily control the size of spacing at the pixel level and can also be used to create the float space elements.

Definition List structure contains a special DD term which is indented by almost all the browsers including the older ones. Tables can also be used for indentation wherein you can successfully use either the first column of the table or the first row of a cell. By this you can not only control the first line but the entire block and it works at the pixel level. Almost all the browsers support tables as they make all the complex indentations also possible. For controlling complex indentations where extremely high degree of control is required such as negative values etc. cascading style sheets can be used. For controlling the width of the images or for graphical representations, Images can be used. Almost all the graphical browsers support this kind of indentation.

In generic terms event handlers can be described as those commands which are optional and are required only when a change occurs either with the host or the service. All the interactions between the user and any web page always get tracked by web browser through events. Therefore, even the smallest activity that is initiated by the user is an event; which can include anything from clicking on a button or loading or reloading a web page or placing the mouse on the image or removing the cursor from the image to hyperlink and many more. Event handlers are nothing but a simple solution provided by Java Script for responding to all the user actions. Event Handlers are always accompanied by HTML code and can be triggered either by a user or a browser.

Events can be separated into two major classes, user related events and documents related events. User related events are nothing extraordinary, they are the standard keyboard and the mouse events that occur when a user handles any of the two and are generic in all the HTML elements and can be classified as mouse and the keyboard events. These would mainly include onKeyDown, onKeyPress, onkeyUp, onDblClick, onMouseUp, onMouseDown and onClick attributes. The documents related events are those special events that occur either when the browser is displaying and managing the HTML documents or are mainly related to the handling of different types of states and actions of HTML form controls. These would majorly include onSubmit, onReset, onChange and onSelect attributes.

The event handlers can also be classified based on their dependencies on the computer devices; event handlers which are device dependent, as the name describes are those event handlers directly dependent on the device such as mouse or keyboard and the others are those ones which are device independent, it does not mean that they are not dependent on any device, they definitely are device dependent but not directly rather through some other means.

The device dependent event handlers in 4.01 version of HTML include ondblclick, onMouseover and onMouseout and are mainly used in the situations where only the presentation of any particular element needs to be changed; while the device independent event handlers include onSelect, onBlur and onFocus primarily find their use in those situations when the even handler is supposed to handle or perform much more than just changing the presentation of any particular element. Whenever using the device dependent event handlers, always remember to test them thoroughly in order to ensure that no additional keyboard event would be required later.

Through the related ‘on’ event attributes, HTML is capable of supporting a rich set of event handlers. Either a quoted string which comprises of one or more script statements or the name of a function which may be described elsewhere in the document can be used to depict the value of the event handler.

Frame naming and targeting is used when the developer wants to associate the link of one frame with the output of another frame. For example, suppose there are two vertical frames. The left one consists of all the links and whenever the user clicks any one of them then the HTML document associated with that link is displayed on the right hand side frame without opening up a new window or affecting the contents of the left side frame. That means the left side contents remain static and the content of the right side frame changes.

These types of frames are very useful and are used to make web site navigation user friendly and interactive. One thing to be noted is that frame targeting cannot be done without naming the frame. The name is necessary because it becomes the identity of the frame and is used by the other frames.

How to do naming and targeting?

The naming of the frame is done using the NAME attribute and the targeting is done with the help of TARGET attribute. The frames can be targeted in different styles. It can be done on an A (Anchor) element, on a BASE element, on an AREA element and on a FORM element.

Targeting for Anchor (A) element:

The Anchor tag (A) which is used at the time of defining hyperlinks in the HTML document is also used while targeting the frames. It specifies the linked document which is to be displayed after the user clicks on a particular link in the frame. For example:

<HTML>
<frameset rows=45%,10%,45%>
<frame name=”upper”>
<frame name=”middle” source=”doc1.html”>
<frame name=”bottom”>
</frameset>
</HTML>

Now the following HTML code has to be written for the doc1.html document

<HTML>
<UL>
<LI><A target=”upper” HREF=”http;//www.italics.in”> Italics Home Page </A></LI>
<LI><A target=”lower” HREF=”http://www.contentmantra.com”> Content Mantra Home Page </A></LI>
</UL>
</HTML>

Whenever the user will click on the Italics Home Page then the web page will get displayed in the upper frame and if he clicks on the Content Mantra Home Page then the relevant web site will be displayed in the lower frame.

Targeting for a BASE element

In this the TARGET attribute uses a default window_name and target all the links towards the same window.

<BASE target=”window_name”>

Targeting for the AREA element

The AREA element type is defines by the Internet-Draft of Client-Side image maps. It is used with the image maps and defines a particular area on the client side image map. It associates a link with that area containing all the details and when the TARGET element is used then the output of the link can be directed towards a separate window.

<AREA shape=”shape” COORDS=”x,y,z…..” HREF=”URL” target=”window_name”>

Targeting for the FORM element

Without any defined target window the FORM element displays the output of the form submission in the same window used to submit the form. The TARGET attribute can be used to direct this output to another window.

<FORM Action=”URL” target=”window_name”>

As discussed earlier, whenever the TARGET attribute is used to direct the output to a new window then the Window_name has to be specified. Whether the developer is targeting for the AREA element, BASE element or the FORM element, the window_name has to be used. A general rule with respect to the window_name says that it must begin with an alphabet. However there are some predefined special window_names which begins with an underscore sign ‘_’. Below is a list of such special window_names and their associated functions:

• _blank: When used, it directs the output to a new window. This name forces the target attribute to load the HTML document associated with the link in a separate unnamed window.

• _self: Whenever this is used the output is displayed in the same frame the user clicks in. In other words the linked document gets loaded in the same frame as the anchor. One crucial point to be noted is when the _self name is used it overrides the BASE target assigned globally.

• _parent: It can be used whenever the linked document has to be loaded into the immediate FRAMESET parent of the document. If there is no parent, then it works like the _self.

• _top: This will make the linked document to get loaded in a full browser window.

Preparing alternate document for the non-frame web browsers

In order to make the frames work properly it is essential that the web browser supports the frames. Sometimes it happens that the web client is incompatible with the frames or it has been configured not to load them. In that case an alternate document has to be prepared so that if the web browser cannot handle the frames then instead of showing an error it loads the alternate documents containing the information.

The alternate document can be prepared very easily with the help of the BODY element and the NOFRAMES tag which follows the outermost FRAMESET element. The content of the BODY element is ignored by those browsers which can read frames. Apart from this all the attributes of the NOFRAMES tag is also ignored.

Below is the HTML code which shows the usage of the NOFRAMES tag.

<HTML>

<frameset cols=”50%,50%”>
<frameset rows=”50%,50%”>
<frame src=”doc.html” >
<frame src=”doc1.html”>
</frameset>
<frameset>
<frame src=”doc2.html”>
<frame src=”doc3.html”>
<frame src=”doc4.html”>
</frameset>
</frameset>
<body>
<noframes>
This section is for those whose web browser is not compatible with frames. It will be ignored automatically if the web browser is set to read the frames. This is an excellent option to avoid any kind of errors.
</noframes>
</body>
</HTML>

As shown in the above code the NOFRAMES tag can be used at the end of the code with all the description and text which has to be displayed without the frames. Above the NOFRAMES tag, there is the normal HTML coding representing the use of nested frames and will be automatically considered when the web browser can support the frames.

In HTML, image maps refer to an image consisting of different parts each pointing towards a different link on the web. These types of maps are used to represent various information related to a particular organization as a whole. The user can see all the options in the form of graphics and then he can select the necessary one to have the details of only the selected portion. Apart from the organizations, Image maps are frequently used by those websites which display maps of different regions. The main advantage of using image maps is that the user gets an easy and interactive way to link to different parts of an image without dividing it.

Example of the HTML code needed for an Image Map:

<MAP NAME=”map1″>
<AREA HREF=”contentmantra.html” ALT=”content mantra” TITLE=”content mantra”>
<AREA HREF=”italics.html” ALT=”italics” TITLE=”italics”>
</MAP>

<IMG SRC=”testmap.gif”
ALT=”map of italics” BORDER=0 WIDTH=300 HEIGHT=300
USEMAP=”#map1″><BR>

[<A HREF=”contentmantra.html” ALT=”contentmantra”>contentmantra</A>]
[<A HREF=”italics.html” ALT=”italics”>italics</A>]

Client side and Server Side Image Maps:

Image maps can be implemented either on client side or on the server side. If it is implemented on the client side, then the determination of the target URLs can be done on the user’s machine. On the contrary, if it is implemented on the server side then the data related to the page location must be passed to the server in order to determine the target URL. The client side image maps are comfortable to access but it cannot offer flexibility in complex decision making like the server side image map do.

Importance of Rollover effects on the Image Maps:

Rollover effects refer to those special effects which occur when the user takes the mouse cursor over the target object. There can be various types of rollover effects which can tell you that the object has been targeted or not. In image maps the most common type of rollover effect is the caption effect. In this kind of effect, whenever the user takes the mouse cursor over a particular part of an image map, a small text is shown which describes that particular part. Thus, the user gains sufficient knowledge about different portions of the map and decides well in advance whether to select a particular area or not. Rollover effects can be embedded with the help of different types of scripts and DHTML coding.

When not to use Image Maps:

No doubt that the image maps are one of the best possible tools to show the information on the web sites, but still there are some situations when one should avoid using them.

• Image maps should not be used if most of the end users are using text based web browsers because these browsers cannot display the graphics.

• Large image maps make the web page very heavy and it takes a long time to get the web site loaded on a slow internet connection.

• If you want to use server side image maps, then make sure that you have a live web server first because these maps cannot be tested without a web server.