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.

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.

Once the web pages has been designed it is very important that they are verified and tested completely before going live on the World Wide Web. Verification here means to check the HTML documents for a large number of errors and testing refer to the checking the reliability, functionality and compatibility of the web pages. During verification the HTML documents are generally examined with respect to their layout, typographic errors, grammatical mistakes and so on. In testing phase all the scripts, functions, applets, embedded tools, CSS (Cascading Style Sheets), DHTML effects etc. are checked.

If you are dealing with a complex web site containing a large number of HTML documents then verifying and testing each and every resource manually can be cumbersome. Therefore, in order to ensure high level of accuracy and to save time a large number of sophisticated computer programs can be used. Below are some popular verification services which can be used to test the web pages:

• Doctor HTML: This is a verification service which is used to analyze the contents of a web page in detail. It can be used for checking different aspects of the HTML documents such as spelling, images, the structure of the document, tables, hyperlinks, forms and much more. It should be noted that Doctor HTML is not a software which can be downloaded and installed in the computer, rather it is a web service (a Common Gateway Interface, CGI script) for which one has to subscribe in order to get his/her web site verified.

• Weblint: Just like Doctor HTML, Weblint is also a web based service which is used to test and verify the HTML documents. It can be used to check the basic structure of the website, to check for the unknown elements and attributes, tag context, overlapped tags, illegally nested tags, images, hyperlinks, obsolete tags etc.

• WebTechs: It is also a web based service which can be used to check whether a particular HTML document or web site conforms to the predefined standards or not.

• Some of the other web site verification services are Slovenian HTMLchek, U.S.M.A (United States Military Academy’s verification service), Harbinger and URL-Minder.

In case you have to verify a small number of HTML documents then it is recommended that apart from using the online verification services you check the web pages yourself also so that the chances of mistakes are minimized. While performing a manual check makes sure that there are no spelling errors, grammatical errors and formatting errors. The navigation structure of the web site should be checked for consistency, all the DHTML effects should be tested in order to see if they are working in the way they were supposed to and the tables should be checked for their alignment. Besides this, all the images, hyperlinks, background scripts and forms should also be checked thoroughly.

Site verification and testing is a continuous and dynamic process. As the web standards change from time to time the web sites are also updated frequently and retested according to the new standards and procedures.

One of the most basic elements of the HTML document is the frame. A frame is basically a device which allows you to open two or more pages in the same window. Mostly the frame concept is used in cases where you wish to split the window. As is the case with many websites, the left hand side is like a navigation strip, a separate page which is a tabulated list of the topics with the relevant links, while the right hand side shows the content related to those topics.

Reading this you might be misled into believing that there are two pages in the window but there are in fact three pages. One tends to forget there is one page which is holding both the pages. This page is called the ‘container’ page, which contains both the pages. All we need to do is open this page and both the other pages automatically open in this page. The format of this page is similar to any other pages.

The HTML frames concept is generally regarded as quite complicated and very hard for new users to grasp. There is an on-going debate among the champions and critics of frames. The critics feel that frames are associated with a few problems, which is why they wish new users to avoid them.

One popular opinion is that they interfere with the basic concept of the web. The web is ideally supposed to be a group of pages, each page with a separate URL and these pages are simply interlinked. On the other hand, frames allow number of pages to have the same URL and when one bookmarks any of these pages, they end up with the URL of the container page.

A second problem with the frameset pages is that they are not browser friendly. Although not a problem now but a bunch of earlier browsers could not access the framed pages. Even now, when such pages are opened on devices other than computers, like palmtops or phones, they do not allow the browser to resize them which makes page viewing cumbersome. Similar to the resizing issue is the printing problem. Browsers find it hard to print such pages and the prints are never satisfactory. There is also the general overall feel that such pages are hard to code especially be novice coders.

Arguably the biggest problem with frames is that they are not search engine friendly. Even search engines like Google do not go through the content of the internal pages and only read the content of the container page.

The champions of frames on the other hand feel the benefits they create are worth a few hassles and they mostly cite the example of inline frames. Inline frames are special frames which circumvent most of the aforementioned problems. Inline frames are also called floating frames. The basic difference between these and the conventional frames is that these pages open in your container page like images or tables would. The coding for these is also quite easy and they present no obvious problems.

So far we have discussed about various types of tags and objects of HTML documents but haven’t come across any methodology which can control the data embedded in them. In a simple HTML document the web browser cannot separate data from the content and thus the user can’t manage and manipulate it. In order to solve this issue the concept of Data Binding was introduced. Via data binding one can associate the data of a database with the HTML pages. Once the web page is downloaded and opened by the web browser the data associated with that page can be differentiated from the any other content and the user has full control over it. Data binding offers a vast array of new methods and properties for HTML tags which can be used to associate a database with the web page.

Data binding involves three basic steps:

1) Adding a data source to the HTML document
2) Binding HTML elements to the data source
3) Developing scripts to control the bonded database table

Adding the Data Source object to the web page

The first and foremost step towards data binding is to identify the data source and add it to the web page. In order to accomplish this The Data Source Objects (DSO) are used. DSOs are provided by Microsoft and are used for supplying data to the web browser. In order to do this, the DSO identifies the data source through various methods such as SQL queries, URLs etc.

Apart from this DSOs are also used to manipulate the data. It is used to give the user complete control over the data. DSO offers a large number of properties, events and methods in order to accomplish this.

The Microsoft’s Internet Explorer comes with two built-in DSOs. The first one is the Advanced Data connector (ADC) and the other one is the Tabular Data Control (TDC). ADC is meant to access the database via server and ODBC (Open Database Connectivity) components. TDC is used to access tabular data stores in the form of comma-delimited text files. Without the DSO no web page can get and access the data.

Binding HTML elements to the data source

It is very crucial to associate the HTML page to the Data source Object. With the help of DATASRC and DATAFLD attributes, the data can be bonded with the HTML elements. The DATASRC refers to the Data Source Object (DSO) and the DATAFLD refers to a specific column of the database. Both of them have to be defined in the HTML code in order to associate a database table with the web page.

Scripting of Data Source Objects

Once the data source has been identified and associated with the HTML document, the final step is to create a script for that which will allow the user to control the data in a particular manner. Without scripting the user cannot manipulate the data. Scripting is done by using different types of properties and methods of Data Source Object.

In today’s world the internet is growing at the speed of a jet. Day by day websites are being improved in terms of interactivity, entertainment, multimedia, graphics and animations. HTML documents now do not refer to the static pages which were used as the source of information only. In fact, the web is being used as the all in one entertainer for every age group.

Web sites based on gaming, animations, 3D graphics etc. are designed to provide the children the whole package of fun and excitement on their fingertips. Customers can look at the product features and virtually use the products before they actually buy it by real time simulation on World Wide Web. These miracles are possible only because of VRML language.

VRML, short for Virtual Reality Modeling Language is a language impeccably designed to facilitate hi-end 3 dimensional real time simulations on the internet. Initially, the SGML and its derivative HTML, both were designed to support two dimensional structures. But with the evolution of VRML, the internet standards have been redesigned in order to full utilize the 3D powers of the web. VRML uses various types of virtual reality objects and virtual worlds which uses three dimensional paradigms for different purposes. These placements of these objects with respect to each other can be defined using the VRML co-ordinate system. Once the positioning has been done, you can define the behavior of different elements of your virtual world.

VRML can be used to beautifully design the HTML documents. This language invokes life in the static web pages. You can do a number of tasks via VRML such as:

• Adding motion to an object
• Creating a virtual world
• 3D simulation of products
• Improving graphics
• Inserting event oriented tasks
• Controlling the behavior of various elements of the virtual world
• Embedding and controlling animations in HTML documents
• Inserting real time games in web sites

How to view VRML worlds?

To view a VRML world we need a VRML browser. A VRML browser is just like the other web browser but it has got additional features which support fascinating world of VRML. VRML browser reads a VRML file and displays the complex geometry, animations and lightning effects as a 3D world. If the 3D world allows navigation, you can examine the different objects of VRML world and navigate through it in an exciting way. VRML browser can be installed as a standalone software application or it can be embedded in the existing web browser as a plug-in.

The best VRML browser

There are a number of VRML browsers available in the market but no one is best. Every VRML browser has got its own set of benefits and constraints. While choosing a VRML browser one should keep in mind the cost, features, objective of using the VRML browser, extra features, hardware acceleration, scripting and overall performance. If you are using the VRML browser as a plug-in, you should also keep in mind that for which browser you need VRML before you select a particular one because for different web browsers different types of VRML plug-ins are developed.