Frameset, Frame and IFrame Elements in HTML

Frame Element

With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.

Disadvantages of using frames:

1. Frames are not expected to be supported in future versions of HTML
2. Frames are difficult to use. (Printing the entire page is difficult).
3. The web developer must keep track of more HTML documents

Frameset Element

The frameset element holds one or more frame elements. Each frame element can hold a separate document. The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.

The <frameset> tag defines a frameset. The <frameset> element holds one or more <frame> elements.

Example: The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The document "frame_a.htm" is put into the first column, and the document "frame_b.htm" is put into the second column:

<frameset cols="25%,75%">
   <frame src="frame_a.htm" />
   <frame src="frame_b.htm" />
</frameset>

IFrame Element

IFrame defines an inline sub window (frame). An iframe is used to display a web page within a web page.

Syntax: <iframe src="URL"></iframe>

The height and width attributes are used to specify the height and width of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").

Example
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

The frameborder attribute specifies whether or not to display a border around the iframe.
Set the attribute value to "0" to remove the border:

Example
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

Points to note about Frames, Framesets and IFrames

1. The <frameset> tag is supported in all major browsers.
2. If you want to validate a page containing frames, be sure the <!DOCTYPE> is set to either "HTML Frameset DTD" or "XHTML Frameset DTD".
3. If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag.
4. Add the <noframes> tag for browsers that do not support frames.
5. Inline frame is just one “box” that is placed anywhere on browser page. In contrast, frame is a bunch of boxes put together to make one site.

 

Read More

List of problems occuring while using html tables

1. Rendering the table is time consuming

The entire table must be downloaded and the dimensions of everything in the table must to be known before the table can be rendered. That can delay the rendering of your content, especially if your table contains images without HEIGHT or WIDTH attributes.

2. Problems in display and layout of contents

If any of your table's content is too wide for the available display area, then the table stretches to accomodate the oversized content. The rest of the content then adjusts to fit the oversized table rather than fitting the available display area. This can force your readers to scroll horizontally to read your content, or can cause printed versions to be cropped.

For readers whose displays are narrower than the author anticipated, fixed-width tables cause the same problems as other oversized tables. For readers whose displays are wider than the author anticipated, fixed-width tables cause extremely wide margins, wasting much of the display area. For readers who need larger fonts, fixed-width tables can cause the content to be displayed in short choppy lines of only a few words each.

3. Search Engine Optimization Issues

Some search engines use the text at the beginning of a document to summarize it when it appears in search results, and some index only the first n bytes of a document. When tables are used for layout, the beginning of a document often contains many navigation links that appear before than actual content. Some search engines ingnore the tables.

4. Syntax issues with tables

Many browsers are especially sensitive to invalid syntax when tables are involved. Correct syntax is especially critical. Even with correct syntax, nested tables may not display correctly in older versions of Netscape Navigator.

Some browsers ignore tables, or can be configured to ignore tables. These browsers will ignore any layout you've created with tables.

Many versions of Navigator have problems linking to named anchors when they are inside a table that uses the ALIGN attribute. These browsers seem to associate the named anchor with the top of the table, rather than with the content of the anchor. You can avoid this problem by not using the ALIGN attribute on your tables.

Take precautions while using tables:

If you use tables for layout, you can still minimize the related problems with careful markup. Avoid placing wide images, PRE elements with long lines, long URLs, or other wide content inside tables. Rather than a single full-page layout table, use several independent tables. For example, you could use a table to lay out a navigation bar at the top/bottom of the page, and leave the main content completely outside any layout tables.

Read More

Protecting E-mail Addresses on Webpages: Beware of using mailto protocol

Placing an e-mail address on a Web page is a dangerous prospect nowadays. If the document on which the address appears generates even a medium amount of traffic, it is a given that a robot or other harvester will pick up the e-mail address and add it to dozens of spam lists.

How do these bots and harvesters collect the e-mail? They work by simply accessing the document and examining the document's source. For example, to insert a link to e-mail Jill at The Oasis of Tranquility, the following code can be inserted into a document:

<a href="mailto:jill@oasisoftranquility.com">Email Jill</a>

Although this shows as simply "Email Jill" on a user agent's screen, the harvester is able to look at the code to find mailto:jill@oasisoftranquility.com. The mailto protocol confirms that an e-mail address is within the anchor tag. The key to protecting your e-mail address is not to add it to documents in an unencoded format. Instead, obfuscate it using one of several methods, including the following:

1. Break it into pieces that are reassembled by a script, which can't be easily discerned by the harvesters.
2. Encode it using a method that can preserve its functionality

Tip: One low-security method for obscuring an e-mail address is to replace the at sign (@) with its entity equivalent, &#64;. This method relies on the assumption that most harvesters search documents for the literal "@" in their quest for e-mail addresses. By removing the literal at sign, you impede the harvester's ability to recognize e-mail addresses. By using the equivalent entity, you ensure that compliant browsers will still render the at sign properly.

However, most harvesters are now keen to this trick and recognize the entity as well as the literal at sign.

The first method is fairly straightforward and uses a script similar to the following:

<script type="text/JavaScript">
    document.write('<a href="');
    t1 = "mai";
    t2 = "lto";
    t3 = ":";
    t4 = "jill";
    t5 = "&#64;";
    t6 = "oasi";
    t7 = "softra";
    t8 = "nquil";
    t9 = "ity";
    t10 = ".";
    t11 = "com";
    text = t1=t2=t3=t4=t5=t6=t7=t8=t9=t10=t11;
    document.write(text);
    document.write('">Mail Jill</a>
</script>

The script breaks the e-mail portion into small chunks, assigns each chunk to a variable, concatenates the chunks into one variable, and then outputs the entire anchor tag. The key to this method is that the pieces of the e-mail never appear together in the file. For additional security the chunks could have their order scrambled — placing number 6 before 3, and so on.

The other method, encoding the address, is a little more complicated. It requires that you first run a program to encode the address and then use those results in your document. The encoding can be done in a variety of ways, one of which is shown in the following listing, an HTML document with form entry and JavaScript for the encoding:

<html>
<head>
    <title>Email Encoder</title>
    <script type="text/JavaScript">
    function encode (email) {
      var encoded = "";
        for (i = 0; i  <  email.length; i++) {
          encoded += "&#" + email.charCodeAt(i) + ";";
        };
        return (encoded);
     };
    </script>
</head>
<body>
<form action="" name="encoder"
    onsubmit="encoded.value = encode(email.value);
    return false;">
<table border="0" cellpadding="3px">
    <tr>
     <td>Enter your<br/>email address:</td>
     <td><input type="text" name="email" size="30" /></td>
     <td><input type="submit" value="Encode"/></td>
    </tr>
    <tr>
     <td>Encoded email:</td>
     <td colspan="2"><input type="text" name="encoded"
          size="60"/></td>
    </tr>
</table>
</form>
</body>
</html>

This document displays a form where you can enter your e-mail address. When you click the Encode button, the e-mail address you entered is converted, character by character, into entity equivalents and placed in the Encoded email field where you can copy it to the clipboard for use in your documents. Note that you can encode only the e-mail address or, optionally, the mailto: protocol string or even the entire anchor tag. Just be sure to replace the same amount of text in your document as you encoded.

Read More

Non Breaking Space vs Zero Width Space in HTML

Text in table cells is a fickle beast, especially when filled with long numbers. True text will typically allow for sane breaks even in a narrow column. However, not much can be done with numeric data or other data that cannot be arbitrarily broken when a column changes sizes.

For example, consider the following number:

1,234,567,890.34

How would you break such a number in a column that supports only a four-character width? It's a tough decision, but probably one you would prefer to make yourself rather than leave it up to HTML and CSS.

Tip:  When deciding where to break numbers, keep in mind that the best places to break are around punctuation (commas, periods) or currency symbols. Doing so will preserve as much readability of your numbers as possible.

You have two essential tools to use when controlling line breaks, the nonbreaking space and the zero-width space.

Non Breaking Space

The nonbreaking space is best known by its HTML entity code, &nbsp;. This character looks and acts like a space, except in that it doesn't allow the browser to break the line at this space. Although it is commonly used to space-fill elements, the nonbreaking space does have its textual uses. For example, you typically would not want the following line broken at the embedded spaces:

12344 Mediterranean Circle

To prevent the line from breaking, you would replace the spaces with nonbreaking space entities, similar to the following:

12344&nbsp;Mediterranean&nbsp;Circle

Zero Width Space

The zero-width space is somewhat opposite to the nonbreaking space — it is not visible but allows the browser to break at the character. The zero-width space can be inserted by using its HTML entity code, &#8203;

Returning to our earlier example number, we can choose where we'd likeit to be broken if it must break (the original number is on the first line, the doctored number on the second):

1,234,567,890.34
1, &#8203;234, &#8203;567, &#8203;890.&#8203;34

Now, if the number needs to be broken, it will be broken after a comma or after the decimal point.

Read More

Preloading Images: A trick to overcome delays in image-rich webpages loading

One of the things that can really slow down the display of Web pages is an abundance of images, each one of which can contain the equivalent of 17,000 to 20,000 characters.

There is a trick of Image Preloading to help overcome the delays experienced while image-rich documents load. Through the use of JavaScript, image files are loaded into image objects. The net result is that the graphics are not displayed but are loaded into the browser's cache for later use. When it is time for the browser to actually display the image(s), they are taken from the local cache instead of having to make the trip across the Internet.

The script embedded in the following document is an example of a preload script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   
    <title>Preloading Images</title>
    <script type="text/JavaScript">
  
    // Assign path of images to be preloaded to array, one image per index
   
    var imagenames = [];
    imagenames[0]   = "images/header.gif";
    imagenames[1]   = "images/logo.jpg";
    imagenames[2]   = "images/picture1.gif";
    imagenames[3]   = "images/picture2.gif";
    imagenames[4]   = "images/picture3.gif";
    imagenames[5]   = "images/rule.gif";
    imagenames[6]   = "images/button01.gif";
    imagenames[7]   = "images/button02.gif";
    imagenames[8]   = "images/button03.gif";
    imagenames[9]   = "images/footer.gif";
    imagenames[10]  = "images/gradient.gif";
    imagenames[11]  = "images/sphere.gif";
  
    // Create new image object for each image and then assign a path to the src, preloading the actual image
   
  function preload(imagenames)
   {
         var images = [];
         for (var i=0; i  <  imagenames.length; i++)
        {
                images[i] = new Image();
                images[i].src = imagenames[i];
         }
    }
   
   // Run script, preloading images, before document loads (alternately, place call in an onLoad  in body tag to preload images after document loads)
  
   preload(imagenames);
  
   </script>
</head>
<body>
    <p>Document body goes here.</p>
</body>
</html>

The script builds an array of image paths and then iterates through them, creating an image object and assigning an src property to cause the image to actually be preloaded. The script can be run via two different means: by a function call in the <head>, which causes the script to run before the document loads, or by an onLoad handler in the <body> tag, which causes the script to run after the document loads.

Note:  Image preloaders aren't useful for individual documents; they are most useful for sites of multiple documents that reuse the same images over and over (buttons, rules, backgrounds, and so on). When seeding the loader, don't forget to include images from all documents your audience may see.

The former, before the document loads, is handy when the document itself contains many images — running the preloader first can speed the display of the initial document. The latter, after the document loads, is better chosen when subsequent documents are the documents with the majority of images. This allows the initial document to load more quickly because it doesn't have to wait for the script to run — the document is displayed for the user to peruse while the script runs in the background.

 

Read More

DOM Events: Mouse Events, Keyboard Events, Form Events, Frame Events and Touch Events

Mouse Events

1. Click Event (onclick): The event occurs when the user clicks on an element.
2. Double Click Event ( ondblclick): The event occurs when the user double-clicks on an element.
3. Mouse Down (onmousedown): The event occurs when a user presses a mouse button over an element.
4. Mouse Move (onmousemove): The event occurs when a user moves the mouse pointer over an element
5. Mouse Over (onmouseover): The event occurs when a user mouse over an element.
6. Mouse Out (onmouseout): The event occurs when a user moves the mouse pointer out of an element.
7. Mouse Up (onmouseup): The event occurs when a user releases a mouse button over an element.

(Microsoft-specific events for IE)

8. Context Menu (oncontextmenu): Fires when the context menu is shown.
9. Drag (ondrag): Fires when during a mouse drag (on the moving Element).
10. Drag Start (ondragstart): Fires when a mouse drag begins (on the moving Element).
11. Drag Enter (ondragenter): Fires when something is dragged onto an area (on the target Element).
12. Dragover (ondragover): Fires when a drag is held over an area (on the target Element).
13. Drag Leave (ondragleave): Fires when something is dragged out of an area (on the target Element).
14. Drag End (ondragend): Fires when a mouse drag ends (on the moving Element).
15. Drop (ondrop): Fires when a mouse button is released over a valid target during a drag (on the target Element).
16. Select Start(onselectstart): Fires when the user starts to select text.

Keyboard Events

1. Key Down (onkeydown): The event occurs when the user is pressing a key or holding down a key.
2. Key Press (onkeypress): The event occurs when the user is pressing a key or holding down a key.
3. Key Up (onkeyup): The event occurs when a keyboard key is released.

(Microsoft-specific events for IE)

4. Help (onhelp): Fires when the user initiates help.

HTML Frame / Object Events

1. Abort (onabort): The event occurs when an image is stopped from loading before completely loaded.
2. Error (onerror): The event occurs when an image does not load properly (for <object>, <body> and <frameset>). 
3. Load (onload): The event occurs when a document, frameset, or <object> has been loaded.
4. Unload (onunload): The event occurs when a document is removed from a window or frame (for <body> and <frameset>).
5. Resize (onresize): The event occurs when a document view is resized.
6. Scroll (onscroll): The event occurs when a document view is scrolled.

(Microsoft-specific events for IE)

7. Before Unload (onbeforeunload): Fires before a document is unloaded.
8. Stop (onstop): Fires when the user stops loading the object. (unlike abort, stop event can be attached to document) 

Form Events

1. Blur (onblur): The event occurs when a form element loses focus.
2. Change (onchange): The event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <select>, and <textarea>).
3. Focus (onfocus): The event occurs when an element gets focus (for <label>, <input>, <select>, textarea>, and <button>).
4. Reset (onreset): The event occurs when a form is reset.
5. Select (onselect): The event occurs when a user selects some  text (for <input> and <textarea>) .
6. Submit (onsubmit): The event occurs when a form is submitted.

(Microsoft-specific events for IE)

7. Before Edit Focus (onbeforeeditfocus): Fires before an element gains focus for editing.

Miscellaneous Microsoft-specific events for IE

1. Before Print (onbeforeprint): Fires before a document is printed.
2. After Print (onafterprint): Fires immediately after the document prints.
3. Property Change (onpropertychange): Fires when the property of an object is changed.
4. Filter Change (onfilterchange): Fires when a filter changes properties or finishes a transition.
5. Readystate Change (onreadystatechange): Fires when the readyState property of an element changes.
6. Lose Capture (onlosecapture): Fires when the releaseCapture method is invoked.

Touch Events

Web browsers running on modern, touch-enabled devices have events, such as "touchstart", "touchend", "touchenter", "touchleave", "touchmove", and "touchcancel". Apple's iOS and Google's Android are two examples of mobile operating systems with support for these events in their web browsers.

When you put a finger down on the screen of the touch enabled devices, it kicks off the lifecycle of touch events and the following events get triggered.

touchstart: When a finger is placed on the touch surface/screen.
touchend: When a finger is removed from the touch surface/screen.
touchmove: When a finger already placed on the screen is moved across the screen.
touchenter: When a touch point moves onto the interactive area defined by a DOM element.
touchleave: When a touch point moves off the interactive area defined by a DOM element.
touchcancel: A user agent must dispatch this event type to indicate when a TouchPoint has been disrupted in an implementation-specific manner, such as by moving outside the bounds of the UA window. A user agent may also dispatch this event type when the user places more touch points (The coordinate point at which a pointer (e.g. finger or stylus) intersects the target surface of an interface) on the touch surface than the device or implementation is configured to store, in which case the earliest TouchPoint object in the TouchList should be removed.

Read More

What is DOM (Document Object Model): Tree and Node Structure of HTML Page

The Document Object Model (DOM) defines a standard way for accessing and manipulating HTML documents. The DOM presents an HTML document as a TREE-STRUCTURE. The DOM is a W3C (World Wide Web Consortium) standard. The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

The Document Object Model (DOM) is the model that describes how all elements in an HTML page, like input fields, images, paragraphs etc., are related to the topmost structure: the document itself.

DOM: The Tree and Node Structure

The HTML DOM views an HTML document as a tree-structure. The tree structure is called a node-tree. In the DOM, everything in an HTML document is a node. All nodes can be accessed through the tree. Their contents can be modified or deleted, and new elements can be created.

Note: The Root Node of DOM Tree is DOCUMENT.

document.documentElement - returns the root node of the document
document.body - gives direct access to the <body> tag

The nodes in the node tree have a hierarchical relationship to each other. On the basis of hierarchy, Nodes can be divided into three categories:

1. Parent Nodes
2. Child Nodes
3. Sibling Nodes:  Child Nodes on the same level are called siblings (brothers or sisters).

Example:

<p>This is a paragraph</p>

Here "p" is parent node and 'This is a paragraph' is a child node.

Note:

1. In a node tree, the top node is called the root
2. Every node, except the root, has exactly one parent node
3. A node can have any number of children
4. A leaf is a node with no children
5. Siblings are nodes with the same parent

Nodes can also be classified as:

1. Element Nodes: Every HTML element is an element node
2. Text Nodes: The text in the HTML elements are text nodes. In the HTML DOM the value of the text node can be accessed by the innerHTML property.
3. Attribute Nodes: Every HTML attribute is an attribute node
4. Comment Nodes: Comments are also treated as nodes in DOM.
5. Document Node: It is the parent node of DOM.. The entire document is a document node

Example:

<p align="right">This is a paragraph</p>

Here "p" is element node, 'This is a paragraph" is a text node and "align" is the attribute node.

Node Properties

In the HTML DOM, each node is an object.Objects have methods and properties that can be accessed and manipulated by JavaScript. Three important node properties are:

1. nodeName
2. nodeValue
3. nodeType

The nodeName Property

The nodeName property specifies the name of a node.

1. nodeName is read-only
2. nodeName of an element node is the same as the tag name
3. nodeName of an attribute node is the attribute name
4. nodeName of a text node is always #text
5. nodeName of the document node is always #document

Note: nodeName always contains the uppercase tag name of an HTML element.

The nodeValue Property

1. The nodeValue property specifies the value of a node.

2. nodeValue for element nodes is undefined
3. nodeValue for text nodes is the text itself
4. nodeValue for attribute nodes is the attribute value

The nodeType Property

The nodeType property returns the type of node. nodeType is read only.
The most important node types are: Element Node, Text Node, Attribute Node, Comment Node and Document Node

HTML DOM Methods:

x.getElementById(id) - get the element with a specified id
x.getElementsByTagName(name) - get all elements with a specified tag name
x.appendChild(node) - insert a child node to x
x.removeChild(node) - remove a child node from x

Note: In the list above, x is a node object (HTML element or node, say document).

HTML DOM Properties

x.innerHTML - the text value of x
x.nodeName - the name of x
x.nodeValue - the value of x
x.parentNode - the parent node of x
x.childNodes - the child nodes of x
x.attributes - the attributes nodes of x

Note: In the list above, x is a node object (HTML element or node, say <p>).

Read More

DocType: Strict, Transitional and Frameset

The DOCTYPE element is an identifier found at the very beginning of an HTML document, even before the element.

 

DocType declares to the browser what version of (X)HTML (eg. 3.4 or 4.01, 5.0 etc.) is used in the document. DocType is not an HTML Tag.

Syntax of DocType and Explanation:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

!DOCTYPE: The identifier. It indicates to the user-agent that the enclosed information will define the type of document of the page.

HTML: The Top Element. This tells the browser what element to expect as the top-level element. For HTML and XHTML documents this element would be <html>

PUBLIC: The Availability. The most common DOCTYPES you will use will be publicly available. But you can also specify a local DTD with the "SYSTEM" key word.

"-//W3C//DTD HTML 4.01 Transitional//EN": The Formal Public Identifier (FPI).

The FPI is made up of these parts:

Registration. If there is a plus-sign (+) here, that means that the organization is registered with the ISO. A minus-sign (-) indicates that it is not registered.

W3C: The Organization. This is the group that owns and maintains the DOCTYPE being used.

DTD: The Type. This defines the type of DOCTYPE used. A Document Type Definition (DTD) defines the legal building blocks of an XML/HTML document. It defines the document structure with a list of legal elements and attributes.

HTML 4.01 Transitional: The Human-Readable Label. This is the label that tells you what DTD is being used. It is written so that humans, rather than computers, can understand it.

EN: The Language. This is the language that the DTD is written in. It is not the language of the content of the page.

The rest of the DOCTYPE identifier is optional: "http://www.w3.org/TR/html4/loose.dtd": It is used to indicate where the DTD for this DOCTYPE can be found

 

DocType is also used to describe the particular flavor of HTML you're using.

For example: There are three variants on HTML 4.01:

1. HTML 4.01 Strict, which describes the structural portions of HTML 4.01 and does not provide any presentational markup or frame-related markup. HTML 4.0 Strict says you to use an Cascading Style Sheet for presentational markup (<b>, <font> etc.) and not to include these elements in HTML page. This DocType claims that the document is a strict document; that is, it is authored according to a strict adherence to the W3C specification, and uses no presentational markup (<b>, <font> etc.). Upon seeing this, IE5/Mac will kick its rendering engine into STANDARD MODE, so that your document will be displayed according to the W3C standards.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

2. HTML 4.01 Transitional, which includes the presentational markup such as and , but does not include frame-related markup. Transitional DTD allows some older PUBLIC and attributes that have been deprecated. This declaration calls for transitional (or loose) adherence to the standards. In this case, IE5/Mac will display the document according to bugwards compatibility rules (Quirk Mode). This will bring the rendering more in line with Internet Explorer for Mac's historical behavior. Upon seeing this, IE5/Mac will kick its rendering engine into QUIRK MODE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

You'll notice that neither example included the URL of a DTD. This was on purpose. If you include the URL of a DTD on any DOCTYPE, even the loose and frameset kinds, then IE5/Mac will go into STRICT MODE. This may lead to unexpected results, as the rendering engine will no longer attempt to emulate historical browser flaws.

Note: There are two types of webpage rendering mode of a brower: Standard Mode and Quirk Mode.

3. HTML 4.01 Frameset, which is the same as HTML 4.01 Transitional except that it adds a description of frame-related markup. If frames are used, the Frameset DTD must be used.

HTML5 DTD-less DOCTYPE

HTML5 uses a DOCTYPE declaration which is very short, due to its lack of references to a Document Type Definition in the form of a URL and/or FPI. All it contains is the tag name of the root element of the document, HTML.

 <!DOCTYPE HTML>

What if DocType is absent in HTML document?

1. An HTML document which lacks a DOCTYPE, will be rendered in bugwards compatibility mode (Quirk Mode), since it is assumed to be an older document which was written before DOCTYPE became widely used.

2.You will not be able to use a HTML (HyperText Markup Language) Validator to check the page coding. HTML validator requires the DOCTYPE declaration.

3.The stylesheet may not be implemented as planned.

Read More

DIV vs TABLE tag: Which one to use?

<div> is the professional way of designing the webpage. It provides flexibility in web designing as you can make any kind of design using CSS. But the problem with CSS is that, its debugging is not easy and people find it hard to learn. That’s why they stick to <table>.<table> is easier to learn and implement as you have to only figure out the layout of rows and cells.

Tables were originally meant for tabular data like displaying a grid etc. Soon the developers realized that tables can also be used to format other data by setting border="0" and hiding the borders.

One limitation with using table is that, if whole page is designed under a single table, the page will not load until whole table is rendered by browser and the situation becomes worst when you use nested tables but same is not with using div.

Second limitation with table is SEO (Search Engine Optimization). Tables work fine for small web pages. But if the page contains a lot of data and sections, tables start nesting themselves and structure become creepy. SE spiders and bots when go on crawling the webpage, they find it difficult to pick actual content from that messy page and as a result indexing of that webpage is affected.

An analogy would be: I sometimes use a knife to open a screw (When I can't find a screwdriver). Knives were not built for this purpose but I can reach the ultimate goal of opening the screw. Now if I just put some effort in finding my screwdriver then opening the screw might be a little easier.

Browser Compatibility issue arises with both div and table. Mozilla and Chrome behaves same but IE6 (and above), Opera, Safari, Netscape may interpret CSS differently.

Read More

HTML vs XHTML vs DHTML

HTML:  HTML (HyperText Markup Language): HTML is the most widely accepted language used to build websites. It is the main structure of a website. It builds tables, creates divisions, gives a heading message (In the title bar of programs), and actually outputs text.

XHTML (eXtensible HyperText Markup Language): : XHTML is extremely similar but follows the rules of XML. The main differences between HTML and XHTML are the case-sensitivity, the need to use closing tags for all tags, the need to use quotes around all attribute values and that all attributes must be in lowercase as XML requires. Special characters between tags need to be replaced with its code equivalent. Declaring the correct doctype (first line in source code) and language (in meta tag in the head of the source code) is required.

XHTML is used to be compatible with XML programming. Following the rules now would make it possible to include XML programming in the future. It is not difficult to change HTML pages to XHTML, but it can be time-consuming. Finding all line breaks and images to include closing tags, converting any uppercase to lowercase and any other incompatibility can be a nuisance. Using a find and replace program can allow you to edit your code faster, but you still have to reupload all those changes. It is recommended that programmers try to remember these rules to comply with W3C recommendations, so the web pages appear correctly in most browsers.

When should you be concerned with XHTML instead of just plain HTML? If the website will contain a catalog of items as in an ecommerce site, the site accesses a database, the site accesses information from another source that uses a different programming language or the site is expected to grow and exist for many years. XHTML is used when referring to XML files used for RSS feeds, some music players, some image galleries and many more applications.

XHTML is popular for mobile web design when used with proper CSS code. Try viewing your website in a mobile simulator to see how your website looks. If you want mobile phones like Nokia or iPhone to access your website, you should use XHTML. You may need to change your DOCTYPE, but if you do, you may need to change additional code. Try to avoid JavaScript, large files, large images and tables.

XHTML  is the same as HTML, except it has a cleaner syntax. XHTML uses the same tags as HTML, so people who know HTML know messy XHTML.

Some new rules are followed in XHTML like:

• XHTML elements must be properly nested.
• XHTML elements must always be closed.
• XHTML elements must be in lowercase.
• XHTML documents must have one root element.
• In HTML, some elements can be improperly nested within each other, like this:

                 <b><i>This text is bold and italic</b></i>

• In XHTML, all elements must be properly nested within each other, like this:

                <b><i>This text is bold and italic</i></b>

DHTML(Dynamic HyperText Markup Language): is a combination of different technologies to make your HTML interactive. Common languages used are HTML (of course), Javascript and Stylesheets. is not a language, but the art of using HTML, JavaScript, DOM and CSS together to create dynamic things, such as navigation menus.

Sample HTML code of .aspx file

<html>

<head>

<title>The Professionals Point</title>

        Here we add path of javascript and css files.

</head>

<body>

<form>

       Here we write code for designing the page.

</form>     

</body>

</html>

Read More