HTML.co.uk

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.

As we all know that internet has been a boon for everybody on this planet and especially for those with some disabilities. But one most important thing to be kept in mind before the designing of the website is the accessibility. Accessibility in terms of website indicates the degree or the measure to which any particular website is usable especially by people with certain disabilities. The main key to accessibility is flexibility. Always remember that people might be using numerous varied technologies to view your web pages depending on the availability of resources.

Availability of proper options and ease of use are the two basic premises of accessibility. A website which has been designed on these grounds will surely be fun and will have optimized loading time. One of the easiest and the simplest methods to check accessibility of your website is to run through an HTML checker. The primary function of the HTML checker is to check through your entire HTML code thoroughly and help you see where your HTML page is inaccessible and finally redisplaying that particular page with images as annotations. This HTML checker is designed to check for all kinds of accessibilities whether it is related to the browser compatibility or the disability access problems.

Always ensure of having a workable text option in your web page as this will allow the people with visual disabilities to access through your pages easily and conveniently. This implies that you should always make use of the ALT tag when ever dealing with graphics and also create alternatives to IMAGEMAPS. And also remember to always give textual description of your graphics as this will prove to be quite important for your web page. The use of font tag with some hard coded values should be avoided especially for visually impaired people. The background should be kept monochromal or lighten the color of the background. Try to keep your website simple and easy by using textual listing of options and avoiding the use of hierarchical menus as far as possible.

The next important factor that comes into picture is the economic accessibility. Everybody cannot of the option of similar bandwidth or internet accessibility options. A website should be such that it should be designed kept in mind the slowest operating system, Lynx terminal thereby using the ALT tag and the textual version of imagemaps. The image and sound files should always be an optional part of the HTML code and not the necessary requirement. Always remember the website should be accessible by people from all walks of life. The vocabulary and the choice of appropriate and easy to understand words is very important. It is always possible to make the entire text and the subject understandable and clear without actually using 20 subjunctive clauses and 8 syllable words. Always make the text easier, simpler and comprehend.

Always remember that your HTML can be made accessible simply by keeping it simple by using clean and easy language. The webpage should support the slowest operating system i.e. Lynx friendly and relative font sizes should be used. The use of ALT tag and hyperlinked text for images and graphics description is always advisable.

If I was to state one thing that makes me uncomfortable and I dislike most while browsing any website, my answer would be its load time. It is the most common and the biggest problem that websites take a long time to load and is surely disliked by all the users. It a well known fact that every individual has a very short attention span because of which a person can keep his attention focused for not more than 8 to 10 sec while waiting for a web page to be loaded. Although, the most ideal response time for any website would be 1 second, but this is really not practical considering the bandwidths available. This is where the HTML optimisation plays an important role.

HTML optimisation is a method or technique of minimizing the HTML file size without compromising on the appearance and the functionality of the web page while maximizing the speed of the page display and thereby offering maximum reader satisfaction. Therefore, it is very important for any web designer to consider three main aspects while designing any web page which primarily include optimising the web pages, brutalizing the graphics in your web page and structuring your site for speed. As the complexity and the need of web design is increasing by day, web designers are ignoring the importance of the load time.

There are a lot of extra characters such as spaces, comments, redundant attributes and returns that are very commonly being used in the web page. Carefully removing or deleting these characters will definitely not affect the appearance of the web page but will definitely help in reducing the size of the web page. Web page is all about balance between bandwidth and beauty. A skilled web designer is able to draw that thin line between functionality and appearance and can wisely design pages that not only appear good but at the same time display also quickly.

Try to eliminate all the leech graphics, leech here means that a graphic that is too big and heavy to sustain its load on its own. Icons should not be confused with graphics. An icon need not be realistic; it just needs to be recognizable in order to be effective. Therefore, avoid the use of very large icons in your website. It is always better to have text based navigation rather than ubiquitous image maps which would chew up a lot of bandwidth. A great way to unify a website visually would be to use a well optimized and well placed logo graphic instead of the un-optimised banner graphic which can only kill the web page’s load time. GIF images of words are nothing more than just being wasteful. Simple plain text transmits faster than anything on the net.

It would not take much of the time to do optimisation of your HTML but it has remarkable effects on the load time and definitely the user satisfaction. It is practically quite easy and achievable to reduce the load time to half without really compromising on the appearance or the looks of the web page.

Cross browser compatibility can be well stated as compatibility of any given website with all the major browsers available such as Internet Explorer, Netscape, Firefox, Safari, Opera and JAWS. It is a very common feature that your ideal version of the site is not able to create a pixel perfect replication in all the browsers. A website designer always writes the code considering any particular web browser, most commonly internet explorer; as a result a website may be working fine with one browser but not supporting the other browsers the same way. Therefore it is very important that each website owner should always test for the cross browser compatibility of their respective websites.

Although you may be having your own preference for a browser but the visitors for your website may not be using the same web browser as you. This is where the cross browser compatibility makes all the difference. Cross browser compatibility mainly deals with the functionality of the website and not with how it would look like. Infact, it has very little to do with browsers as well and can be well stated as multi user agent compatibility. When we refer to the term compatibility here, we do not mean looks and behaves identically; instead here it typically means that it performs equivalently under alternative conditions.

Functionality is simply the absolute key to cross browser compatibility. A lack of cross browser compatibility does not mean that the site looks different on all the different types of browsers but it simply means that the site doesn’t work on all the other browsers except for one, for which it has been designed. It is entirely possible though occasionally, to make two browsers renders a same design, but only on a condition that you make certain factors such as the user settings constant. Everything would just go out of the window if you try to tamper with those settings. It is always desirable to make the designs of your website as similar as possible between various browsers, but at the same time it is quite important to understand that there are always certain limitations to it.

It is very important to take certain factors into consideration which designing any website which would aid in cross browser compatibility. Firstly, it is very important to use only standard compliant coding. The HTML tags and features used while coding should not be browser specific. As these would only work in those browsers that they have been created for and can even lead to breakage of the web page when viewed in any other browser. Always remember to validate all your web pages which include the HTML or XHTML coding and cascading style sheets using the free validation service from W3C.

There is nothing much that can be done to keep a similar view across all the different browsers, instead you should try and guarantee something which is achievable, i.e. an equivalent view for all. Equivalent here means that the users should be able to get the similar information and also use the website to perform similar functions. Our main goal with cross browser compatibility is to make the website viewable in all major browsers and at the same time have the pages rendered correctly. Always remember that a website that doesn’t work in any choice o browser will surely drive the visitors away.

To understand graceful degradation, it is very important to understand first Tag Degradation. Tag degradation is a phenomenon which describes the incompatibilities which could be either deliberate or accidental, in the web documents. All the web browsers follow one simple rule with respect to HTML tags which states that, “If you do not understand a tag, just ignore it.” Whenever a web browser encounters any tag and it fails to understand and display it, the result is degradation. This is where the concept of graceful degradation comes in. Graceful degradation is a simple but a powerful technique which ensures that a web page should be coded in such a way that just in case if the browser is not able to cope up with any of its effect or feature the page should yet be displayed in a simplified form.

When the degradation takes place, the content of your page will be either lost to the web browser or the content of your page will still be completely accessible, which will depend solely on whether the degradation is graceful or not. As we all know that HTML is continuously changing and different browser have different characteristics and each one supports different elements, therefore graceful degradation is the main element which ensures that all the pages are readable and accessible in all the browsers. The standards for HTML have been written keeping this important key i.e. graceful degradation in mind.

Graceful degradation has two basic rules. Firstly any browser should be able to view the content of the site and secondly any browser should be able to navigate the site. This simply indicates that the website should still be able to operate even when it is being viewed with less optimal software which does not support any kind of advanced features. You can add as many special effects as desired but always ensure that the site is very much operative and usable without them as well. The essence of quality web programming is ensuring graceful degradation. By definition, we all know that no HTML will run on all the browsers, errors are inevitable. Although a page might appear different in an older version of the browser in comparison to the latest ones but what is important is the fact that information should always be available to the user.

There are various good examples which can successfully describe graceful degradation, such as the use ALT attribute in IMG tags. By using alt, we are providing a text alternative to the browser. In case the browser is not able to display the image it can provide the relevant text information. Another example can be if CSS is used to describe the text color, and in case if the web browser does not support the style sheets the text will return to its default color which is black and thereby making the text readable by the user. Graceful degradation is only possible if the HTML used in the web pages should be valid which means that it should be grammatically correct. Browser should have something to fall back on. When the HTML is written badly, it would mean that when the browser tries to ignore certain parts which are not understandable, atleast the content can be displayed. And finally the tag should be closed at the end. If the tag is left open, it would completely fail.

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”>

Frames are used to divide a window into two or more scrollable sections. In each section different documents can be displayed or various parts of the same document can be linked together. Like any other HTML element each frame can be given a name, its dimensions can be set, its alignment can be defined, the borders and shades can be applied and finally a particular HTML file can be linked with it which is to be displayed. Apart from this some advanced operations such as defining the loading/unloading behavior, scroll behavior, style sheets etc. can be also performed on the frames.

HTML frames use the following attributes to behave in a particular manner and display the desired document:

• Name: It is used to link the frame to any addressable object. When a name is assigned to a frame then it can be targeted by the links in other documents. However it is not mandatory to use this attribute. By default all the windows are unnamed, but if you want to target the contents of the frame then the name attribute are necessary.

• Source: This attribute is used to display the desired HTML page in the frame.

• frameborder: This is used to set or unset the border between the frames. If the value of this attribute is 1 then a border will appear and if the value is 0 then there will be no border.

• marginwidth and marginheight: These two attributes are used to specify the frame margins both sideways and vertically respectively.

• noresize: It is used to restrict the end user from resizing the frame.

• scrolling: This one is used to define the scrolling mode of the frame. If its value is yes, then the frame will have a scroll bar. If the value is no, then the frame will have no scroll bar, and if its value is auto, then the frame will have the scroll bar only if the document size is larger than the frame.

Because of these attributes different types of frames can be created. For example:

• Static Frames: These types of frames are fixed and display only static documents. They are used to display that information which the user can see all the time, such as logos, copyrights, buttons, graphics etc. The user cannot affect the behavior of such frames by doing any activity.

• Live Frames: These frames responds according to the user’s input. They are very interactive in nature and generally contain interactive forms, videos, audio and multimedia content.

• Functional Table of Contents: These types of frames are used to display interactive table of contents on one side and when the user clicks on any topic the document linked to that link is displayed in the adjacent frame.

• Single Page Query and Answer Displays: These types of documents have two sections, one containing the query from which has to filled by the user and the other section displays the answers to the query interactively.

Apart from these, several other types of frames can be designed and customized using different attributes according to the requirements.

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.