tag:blogger.com,1999:blog-22646153782008052672024-03-06T08:47:26.522+05:30Destination-Code - Chetan Crasta's XHTML, HTML and CSS NotesChetan Crasta's XHTML, HTML and CSS NotesChetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.comBlogger166125tag:blogger.com,1999:blog-2264615378200805267.post-88875928371733459982011-01-06T23:35:00.000+05:302011-01-06T23:35:57.153+05:30The img Element<p>The <code>img</code> element is used to insert an image into an (X)HTML page. It is an inline replaced
element. It is an empty element. The URI of the image is defined by the <code>src</code> attribute. Any image format that
the browser supports can be used. Common formats are JPEG, PNG and GIF.</p>
<p>The <code>src</code> and <code>alt</code> attributes are required.</p>
<h4>Attributes</h4>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html"><code>Core Attributes</code></a></dt>
<dd>The core attributes can be applied to this element.</dd>
<dt><code>align</code></dt>
<dd>This is a deprecated attribute. It specifies the alignment of the image.
Its value can be <code>bottom</code>, or <code>left</code>, or <code>middle</code>, or <code>right</code>,
or <code>top</code>. Since this a presentational attribute, it is preferable to use CSS instead.</dd>
<dd><dl>
<dt><code>bottom</code></dt>
<dd>Aligns the image to the baseline</dd>
<dt><code>middle</code></dt>
<dd>Aligns the vertical middle of the image to the baseline</dd>
<dt><code>top</code></dt>
<dd>Aligns the top of the image to the top of the line box.</dd>
<dt><code>left</code></dt>
<dd>Aligns the image to left edge of the line box</dd>
<dt><code>right</code></dt>
<dd>Aligns the image to the right edge of the line box</dd>
</dl></dd>
<dt><code>alt</code></dt>
<dd>This is a required attribute. The value of this attribute is a short description
of the image. It is displayed when the image cannot be loaded. It may also be used by
non-visual browsers.</dd>
<dt><code>border</code></dt>
<dd>This is a deprecated attribute. Its value is a number
that specifies the width of the border in pixels that surrounds the image.
Since this is a presentational attribute, it is preferable to use the CSS
<code>border</code> property instead.</dd>
<dt><code>height</code></dt>
<dd>This attribute specifies the height of the image. Using this attribute
may speed up the rendering of the page because the browser can allocate space
for the image before it is fully loaded. Since this is a presentational attribute,
it is preferable to use the CSS
<code>height</code> property instead.</dd>
<dt><code>hspace</code></dt>
<dd>This is a deprecated attribute. Its value is a number that specifies the
width in pixels of the right and left margins of the image. Since this is a presentational attribute,
it is preferable to use the CSS
<code>margin</code> property instead.</dd>
<dt><code>ismap</code></dt>
<dd>This attribute takes only one value and is specified as follows: <code>ismap="ismap"</code>.
It indicates that the image is part of an <code>server-side image map</code>.</dd>
<dt><code>longdesc</code></dt>
<dd>The value of this attribute is a URL to a document that has a description of the
image. This will help those who are browsing the document
non-visually. However, visual browsers such as Firefox, Internet Explorer, etc. do not
provide any method to view the document specified in <code>longdesc</code>.</dd>
<dt><code>name</code></dt>
<dd>This attribute is deprecated in XHTML. It is better to use the <code>id</code> or
<code>class</code> attribute in both HTML and (X)HTML documents.</dd>
<dt><code>src</code></dt>
<dd>This is a required attribute. Its value is the URI of the image that is to be embedded.</dd>
<dt><code>usemap</code></dt>
<dd>This attribute is used to specify the <code>map</code> element that contains the
client-side image map information of the iamge. The value of this attribute is the <code>name</code>
(in case of HTML) or the <code>id</code> (in case of XHTML), prefixed with a hash (#)
of the <code>map</code> element.</dd>
<dt><code>vspace</code></dt>
<dd>This is a deprecated attribute. Its value is a number that specifies the
width in pixels of the top and bottom margins of the image. Since this is a presentational attribute,
it is preferable to use the CSS
<code>margin</code> property instead.</dd>
<dt><code>width</code></dt>
<dd>This attribute specifies the width of the image. Using this attribute
may speed up the rendering of the page because the browser can allocate space
for the image before it is fully loaded. Since this is a presentational attribute,
it is preferable to use the CSS
<code>width</code> property instead.</dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-41857782961445207262011-01-06T14:52:00.001+05:302011-01-06T14:56:28.713+05:30Inline Frames<p>Inline Frames, specified by the <code>iframe</code> element allow one to display files
within an (X)HTML document.
The inserted file can be another (X)HTML document or an image or text file etc. The inserted file,
specified by the <code>src</code> attribute, is displayed in a rectangular frame.</p>
<p><code>iframe</code> is an inline replaced element. It is also a flow element, therefore
it can have block or inline child elements. The child elements and/or text content of the
Inline Frame are displayed by browsers that do not support Inline Frames.</p>
<p>Only the transitional doctypes allow Inline Frames.</p>
<h4>Attributes</h4>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html"><code>Core Attributes</code></a></dt>
<dd>The core attributes can be applied to this element.</dd>
<dt><code>align</code></dt>
<dd>This is a deprecated attribute. It specifies the alignment of the Inline Frame within its parent element.
It can have a value of <code>top</code>, or <code>middle</code>, or <code>bottom</code>,
or <code>left</code>, or <code>right</code>. Since it is a presentational attribute, CSS should be used
instead.</dd>
<dt><code>frameborder</code></dt>
<dd>This attribute can have a value of <code>1</code> or <code>0</code> which specifies
if there should be a border around the frame or not. Since this is a presentational attribute, it
is preferable to use the CSS border property instead.</dd>
<dt><code>height</code> and <code>width</code></dt>
<dd>This attribute can have a number or a percentage value. Number values specify the height (or width) of the
Inline Frame in pixels and percentage values refer to the height (or width) of the parent element.
Since this is a presentational attribute, it is preferable to use the CSS <code>height</code> or
<code>width</code> property instead.</dd>
<dt><code>longdesc</code></dt>
<dd>The value of this attribute is a URL to a document that has a description
of the content of the Inline Frame. This will help those who are browsing the frameset
document non-visually. However, visual browsers such as Firefox, Internet Explorer, etc.
do not provide any method to view the document specified in longdesc.</dd>
<dd>Example: <code><iframe src="fr.html" longdesc="frdesc.html"></code></dd>
<dt><code>marginheight</code></dt>
<dd>The value of this attribute, a number, specifies the top and bottom margins between the displayed
contents of the source file of the Inline Frame and its inner edge.
</dd>
<dt><code>marginwidth</code></dt>
<dd>The value of this attribute, a number, specifies the left and right margins between the displayed
contents of the source file of the Inline Frame and its inner edge.</dd>
<dt><code>name</code></dt>
<dd>This attribute assigns a name to the Inline Frame so that it can be targetted by links having
the <code>target</code> attribute.</dd>
<dt><code>scrolling</code></dt>
<dd>This attribute can take one of these values: <code>yes</code>,<code>no</code> or <code>auto</code>.
With <code>yes</code>, scrollbars are always show whether they are needed or not. With <code>no</code>,
scrollbars are never shown. With <code>auto</code>, scrollbars are shown when needed,
this is the default.</dd>
<dt><code>src</code></dt>
<dd>The value of this attribute is a URL that specifies the initial file that will be displayed in the frame.
The <code>src</code> attribute can refer to any file, even to another frameset document.</dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-76111791641005854402011-01-06T01:05:00.001+05:302011-01-06T01:05:51.489+05:30The i Element<p>This element causes its text content to be displayed in italics. It is an inline element.
It is a non-semantic, purely presentational element, therefore its use is discouraged.
When italics are needed for emphasis, the <code>em</code> or <code>strong</code> element should be used
with the presentation handled by CSS.</p>
<h4>Attributes</h4>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html"><code>Core Attributes</code></a></dt>
<dd>The core attributes can be applied to this element.</dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com1tag:blogger.com,1999:blog-2264615378200805267.post-39644709582115614142011-01-06T00:55:00.001+05:302011-01-06T00:59:21.684+05:30The html Element<p>The <code>html</code> element is topmost in the hierarchy of (X)HTML elements and is known as
the <dfn>root</dfn> element.
Therefore all (X)HTML elements are descendants of the <code>html</code> element. The <code>html</code>
element appears after the Document Type Declaration.</p>
<p>The <code>head</code> and the <code>body</code> elements, and, in the case of a Frameset document, the
<code>frameset</code> element are the only child elements of <code>html</code>.</p>
<p>Example: <code style="white-space:pre"><html lang="en"></code></p>
<h4>Attributes</h4>
<dl>
<dt><code>lang</code> and <code>xml:lang</code></dt>
<dd>These attributes specifiy the language of the contents of the document.
See <a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">this page</a> for more information.</dd>
<dt><code>dir</code></dt>
<dd>See <a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">this page</a>.</dd>
<dt><code>id</code></dt>
<dd>This attribute is used to uniquely name the <code>html</code> element. It is allowed
on the <code>html</code> element only when the doctype is XHTML.</dd>
<dt><code>version</code></dt>
<dd>This is a deprecated attribute. Its value is the Formal Public Identifier of the HTML
Document Type Definition (DTD) of the document. This attribute should not be used because the DTD of the
document is specified in the doctype.</dd>
<dt><code>xmlns</code></dt>
<dd>This is a required attribute in XHTML documents. It specifies the XML namespace of the document.</dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-88396272585276625332011-01-06T00:10:00.000+05:302011-01-06T00:10:09.608+05:30The hr Element<p>The <code>hr</code> element creates a horizontal rule. It is a block element.
It is an empty element, that is,
it cannot contain any other element or text. This is a presentational (X)HTML element.
Therefore, it is preferable to use CSS borders to create horizontal rules instead of using the
<code>hr</code> element.</p>
<h4>Attributes</h4>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html"><code>Core Attributes</code></a></dt>
<dd>The core attributes can be applied to this element.</dd>
<dt><code>align</code></dt>
<dd>This is a deprecated attribute. It can take the value <code>center</code> or <code>left</code>
or <code>right</code>. This attribute is used to align the horizontal rule when its length is less
than the content area of its parent element. Since it is a presentational attribute, CSS should be
used instead.</dd>
<dt><code>noshade</code></dt>
<dd>This is a deprecated attribute.
This attribute is specified as <code>noshade="noshade"</code>. It displays the rule with one solid
color, instead of the default 3D shade.</dd>
<dt><code>size</code></dt>
<dd>This is a deprecated attribute. Its value, a number, specifies the height (thickness) of the rule.</dd>
<dt><code>width</code></dt>
<dd>This is a deprecated attribute. Its value is a number or a percentage. If the value is a
number, it specifies the width (length) of the rule in pixels. If the value is a percentage, it calculates the
the width (length) of the rule as a percentage of the width of the parent element.</dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-9082696436029269892011-01-05T22:44:00.003+05:302011-01-06T00:52:56.987+05:30The head Element<p>The <code>head</code> element contains information that describes the (X)HTML document.
This information is not considered part of the content
of an (X)HTML page and is therefore not displayed in the
viewport.</p>
<p>The <code>head</code> element must contain one <code>title</code> element.</p>
<p>These are the elements that <code>head</code> can contain:</p>
<ul>
<li><code>title</code></li>
<li><code>base</code></li>
<li><code>meta</code></li>
<li><code>script</code></li>
<li><code>link</code></li>
<li><code>style</code></li>
<li><code>object</code></li>
</ul>
<p>There can be only one <code>title</code> and <code>base</code> element. However,
the other elements can be present multiple times.</p>
<h4>Attributes</h4>
<dl>
<dt><code>lang</code> and <code>xml:lang</code></dt>
<dd>These attributes specifiy the language of the contents of the <code>head</code>
element. However, this attribute is more often specified for the <code>html</code> element.
See <a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">this page</a> for more information.</dd>
<dt><code>dir</code></dt>
<dd>See <a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">this page</a>.</dd>
<dt><code>id</code></dt>
<dd>This attribute is used to uniquely name the <code>head</code> element. It is allowed
on the <code>head</code> element only when the doctype is XHTML.</dd>
<dt><code>profile</code></dt>
<dd>The value of this attribute is the URI of a document that provides more information of the <code>meta</code>
element's <code>content</code> attribute.</dd>
</dl>
<p>Here is the W3.org's <a href="http://www.w3.org/TR/REC-html40/struct/global.html#edef-HEAD" >HTML 4</a>
specification page for the <code>head</code> element.</p>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com1tag:blogger.com,1999:blog-2264615378200805267.post-76622307863252237072011-01-04T17:18:00.000+05:302011-01-04T17:18:39.656+05:30The h1, h2, h3, h4, h5 and h6 Elements<p>The <code>h1</code>, <code>h2</code>,
<code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements are used on headings.
A <dfn>heading</dfn> is a short description of the document section it is in. Since a document can have many
headings and sub-headings, HTML provides six elements from <code>h1</code> to <code>h6</code>.
<code>h1</code> is at the top most of the hierarchy and <code>h6</code> is at the lowest.</p>
<p>These are block elements that can only have inline elements as their child elements.</p>
<p>Since the various heading elements are used to indicate a hierarchy of headings and content,
it doesn't make sense to skip levels. For example, after an <code>h1</code> element, the
next heading element should be <code>h2</code> not any other heading element like <code>h3</code>.</p>
<p>An heading element can contain an image if the image's content describes the content of the
document section.</p>
<h5>Attributes</h5>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html"><code>Core Attributes</code></a></dt>
<dd>The core attributes can be applied to this element.</dd>
<dt><code>align</code></dt>
<dd>This is a deprecated attribute. It can take as values either <code>center</code>,
<code>left</code>, and <code>right</code>. The CSS property <code>text-align</code> should be used instead of this property.</dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-73441388329886368532011-01-03T17:29:00.002+05:302011-03-24T18:18:45.858+05:30The frameset, frame, and noframes Elements<p>With <dfn>HTML frames</dfn> one can display multiple HTML documents at once.
Each HTML document is displayed in a <code>frame</code>. A <dfn>frame</dfn>
is created using the <code>frame</code> element and usually occupies only a part of
the viewport. The <code>frame</code> elements are contained within a
<code>frameset document</code>. A <dfn>frameset document</dfn> specifies the
dimensions and layout of the frames. A frameset document uses a frameset
doctype:</p>
<dl>
<dt>HTML 4.01 Frameset Document Type Definition</dt>
<dd><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"></code></dd>
<dt>XHTML 1.0 Frameset Document Type Definition</dt>
<dd><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"></code></dd>
</dl>
<p>Instead of the <code>body</code> element, a frameset document contains
the <code>frameset</code> element. This frameset element can contain the
<code>frame</code> element, the <code>noframes</code> element or even more
<code>frameset</code> elements.</p>
<h4>The <code>frameset</code> Element</h4>
<p>This element is the container for the frame elements of a frames document. In a framset document,
it takes the place of the <code>body</code> element.
Frameset elements can be nested within each other. Therefore, a <code>frameset</code>
can contain both <code>frame</code> elements and <code>frameset</code> elements.</p>
<p>Example 1: <code style="white-space:pre">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>A Frames Document</title>
</head>
<frameset rows="100,*">
<frame src="logo.html">
<frameset cols="200px,*">
<frame src="nav.html">
<frame src="content.html">
</frameset>
</frameset>
</html>
</code></p>
<h5>Attrbutes</h5>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">Core Attributes</a></dt>
<dd>The core attributes can be applied to this element.</dd>
<dt><code>cols</code></dt>
<dd><p>The value of this attribute is a comma-separated list of numbers, and/or percentages, and/or relative lengths.
This attribute specifies the number of columns and their widths.
</p>
<dl>
<dt>Number values</dt>
<dd>Number values specify the widths of the columns in pixels.
Example: <code><frameset cols="200,400,200"></code></dd>
<dt>Percentage Values</dt>
<dd>These specify the width of the columns as a percentage of the width of the viewport.
Example: <code><frameset cols="20%,70%,10%"></code></dd>
<dt>Relative Length Values</dt>
<dd><dl style="margin-top:0;padding-top:0;"><dt>An asterisk (*) specifies that the column should use all the available space.</dt>
<dd>Example: <code><frameset cols="100px,70%,*"></code></dd>
<dt>Asterisks that are prefixed with numbers are used to specify ratios.</dt>
<dd>Example: <code><frameset cols="2*,7*,*"></code></dd>
<dt>In the above example, the ratio of the widths of the three columns are 2:7:1.</dt>
<dd>Relative length values are useful when used together with number values, because they allow one
to relatively divide the space remaining after allocating a fixed number of pixels.</dd>
<dt>Example: <code><frameset cols="200,5*,2*"></code></dt></dl></dd>
</dl>
<dt><code>rows</code></dt>
<dd>This takes the same values as <code>cols</code>, but specifies the height of rows.</dd>
<dd>Example: <code><frameset rows="200,400,200"></code></dd>
<dd>The <code>rows</code> and <code>cols</code> attributes can be used together to specify
both rows and columns in a frameset.</dd>
<dd>Example: <code><frameset cols="100,200" rows="50%,50%"></code></dd>
<dt><code>border</code></dt>
<dd>This is a nonstandard attribute. Its value is a number. This number is the pixel width of the frame
borders. A value of zero removes the frame borders.</dd>
<dt><code>bordercolor</code></dt>
<dd>This is a nonstandard attribute. The value of this attribute is a color name or a hexadecimal notation color value. Opera does not
support this attribute.</dd>
<dt><code>frameborder</code></dt>
<dd><p>This is a nonstandard attribute. However, this attribute is standard on the
<code>frame</code> element. Therefore, it is preferable not to use this attribute on the
<code>frameset</code> element.</p>
<p>The value of this attribute can be <code>1</code> or <code>yes</code> to display the borders,
or <code>0</code> or <code>no</code> to hide the borders. Opera does not support this attribute.</p></dd>
</dl>
<h4>The <code>frame</code> Element</h4>
<p>The <code>frame</code> element is used to specify the initial source file of a frame in a frameset.
This is an empty element. Apart from the initial file, the attributes of this element specify the presentation, behavior and
semantics of the frame.</p>
<h5>Attrbutes</h5>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">Core Attributes</a></dt>
<dd>The core attributes can be applied to this element.</dd>
<dt>src</dt>
<dd>The value of this attribute is a URL that specifies the initial file that will be
displayed in the frame.
The <code>src</code> attribute can refer to any file, even to another frameset document.
</dd>
<dd>Example: <code><frame src="../folder/file.html"></code></dd>
<dt><code>bordercolor</code></dt>
<dd>This is a nonstandard attribute. This attribute specifies the color of the frames borders.
The <code>bordercolor</code> specified on the <code>frame</code> element overrides the
color specified by <code>bordercolor</code> on the parent <code>frameset</code> element.</dd>
<dt><code>frameborder</code></dt>
<dd>This is a nonstandard attribute. The value of this attribute can be <code>1</code> or <code>yes</code> to display the borders,
or <code>0</code> or <code>no</code> to hide the borders. Opera does not support this attribute.
<strong>The value of this attribute on the <code>frame</code> element
does not override the value specified on the <code>frameset</code> element.</strong></dd>
<dt><code>longdesc</code></dt>
<dd>The value of this attribute is a URL to a document that has a description of the
content of the frame. This will help those who are browsing the frameset document
non-visually. However, visual browsers such as Firefox, Internet Explorer, etc. do not
provide any method to view the document specified in <code>longdesc</code>.</dd>
<dd>Example: <code><frame src="fr.html" longdesc="frdesc.html"></code></dd>
<dt><code>marginheight</code></dt>
<dd>This specifies the top and bottom margin between the inside edge of a frame and its contents.
It is a number value, which specifies the margin in pixels. The value has to
be a positive number and greater than zero.</dd>
<dt><code>marginwidth</code></dt>
<dd>This specifies the left and right margin between the inside edge of a frame and its contents.
It is a number value, which specifies the margin in pixels. The value has to
be a positive number and greater than zero.</dd>
<dt><code>name</code></dt>
<dd>This attribute is used to name a frame. It allows links in one frame to load documents
into another using the <code>target</code> attribute on <code>a</code> elements.</dd>
<dt><code>noresize</code></dt>
<dd>This attribute can have only one value, like this: <code>noresize="noresize"</code>.
When this attribute is present, it prevents the user from resizing the frame. Note that
in a three-column or three-row layout, setting <code>noresize="noresize"</code> on the middle
column or row prevents resizing of all the columns or rows.</dd>
<dt><code>scrolling</code></dt>
<dd>This attribute can take one of these values: <code>yes</code>,<code>no</code> or <code>auto</code>.
With <code>yes</code>, scrollbars are always show whether they are needed or not. With <code>no</code>,
scrollbars are never shown. With <code>auto</code>, scrollbars are shown when needed, this is the default.</dd>
</dl>
<h4>The <code>noframes</code> Element</h4>
<p>This is a block element whose contents are displayed only in browsers that do not
support frames or have frames disabled. This element usually appears as the last child of <code>frameset</code>.
<code>noframes</code> is a flow element and can therefore contain
both block and inline elements.</p>
<p>In an XHTML frameset document, this element must contain the <code>body</code>
element. In an HTML frameset document, <code>body</code> is an optional child element.</p>
<h4>Nesting Framesets</h4>
<p>Frames can be nested in each other. There are two ways of doing this:</p>
<dl>
<dt>Putting a frameset document in a frame</dt>
<dd>A frameset document can be specified in the <code>src</code> attribute of
the <code>frame</code> tag.</dd>
<dd><dl>
<dt><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqROOPNlPvuU0CtKGZsXG388tJFne-xpQjvUpw0r7jPEF0fl7YdILbQW3K6nEomq8I0o5doPrwacswKj5i9TKWOh5-H4F55tmIECSxzdTVbmiHuwwNjkIJPxthH1y91e1Tnrmh2uvmDFwS/s1600-h/nested+frames.GIF"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqROOPNlPvuU0CtKGZsXG388tJFne-xpQjvUpw0r7jPEF0fl7YdILbQW3K6nEomq8I0o5doPrwacswKj5i9TKWOh5-H4F55tmIECSxzdTVbmiHuwwNjkIJPxthH1y91e1Tnrmh2uvmDFwS/s320/nested+frames.GIF" alt="" id="BLOGGER_PHOTO_ID_5228818681893520946" border="0" /></a><dt>
<dd>The image above shows how a nested-frame webpage looks.</dd></dl></dd>
<dd>There is one major disadvantage to this method:
The nested frameset is independent of the parent frameset.
Therefore, the nested frames cannot be targeted by links in the parent frameset frames.</dd>
<dt>Nesting <code>frameset</code> Elements</dt>
<dd style="margin-left:0;padding-left:0"><code style="white-space:pre"><frameset cols="18%,64%,18%">
<frame src="mefra1.html" name="navigation" noresize="noresize" />
<frameset rows="18%,64%,18%">
<frame src="header.html" />
<frame src="all_tags.html" name="content" scrolling="yes" />
<frame src="footer.html" />
</frameset>
<frame src="mefra3.html" name="copyright" title="copyright" />
</frameset></code></dd>
<dd>There is no difference in the appearance of the nested frameset document using either of the two methods.
The difference is all frames - nested and otherwise - can be targeted by links anywhere in the document.
Therefore, this method is superior to the first method.</dd>
</dl>
<h4>Problems with frames</h4>
<dl>
<dt>Bookmarking</dt>
<dd>When browsing a frameset, the URL in the address bar never changes.
This is because new web pages load within the frames of the frameset.
Therefore, if you click a link in any of the frames of a website and then bookmark it,
you bookmark only the URL of the frameset (the URL displayed in the address bar).
You cannot return to the page you were looking at using the bookmark.</dd>
<dt>Linking</dt>
<dd>With plain HTML and CSS, it is not possible for a link to load
a frameset along with specific pages in its frames. A link can load a frameset,
which will always load its default pages into its frames.
Search engine users who arrive at a page on a website using frames will only see a single page
of a frame, not the frames page within its frameset.</dd>
<dt>Latency</dt>
<dd>Framesets are slow to load because many files have to be downloaded to fill up one screen.
Each HTML file requires an HTTP request to be sent, this makes framesets much slower than ordinary web pages.</dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-81361302459729187702010-12-21T22:35:00.000+05:302010-12-21T22:35:13.972+05:30The form Element<p>A form is a section of a document that contains blank areas that can be filled by a user and submitted to be processed. In (X)HTML the <code>form</code> element is used to create a form. It contains various <code>form controls</code>. It is a block element and can have only block elements and the <code>script</code> element as children. <code>form</code> elements cannot be nested within each other.</p>
<p>These are the allowed child elements of <code>form</code>:</p>
<ul>
<li><code>p</code></li>
<li><code>h1</code> to <code>h6</code></li>
<li><code>ul</code> and <code>ol</code></li>
<li><code>pre</code></li>
<li><code>dl</code></li>
<li><code>div</code></li>
<li><code>noscript</code></li>
<li><code>blockquote</code></li>
<li><code>hr</code></li>
<li><code>table</code></li>
<li><code>fieldset</code></li>
<li><code>address</code></li>
<li><code>script</code></li>
</ul>
<h4>Attributes</h4>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">Core Attributes</a></dt>
<dd>The core attributes can be applied to this element.</dd>
<dt><code>accept</code></dt>
<dd><p>The value of this attribute is a comma-separated list of MIME types which the server can process. Browsers should not allow a user to upload files of a type that is not listed. However, none of the major browsers support this feature.<p><p>Example: <code><form action="" accept="image/gif, image/jpeg"></code></p></dd>
<dt><code>accept-charset</code></dt>
<dd><p>This attribute specifies the character encodings of the user input that the form processing server must accept in order to process the form. The value of this attribute is a comma-separated or space-separated list of IS0 character set names. The default value is <code>unknown</code>, which the browser will interpret as the same character encoding that the page that contains the form is in. Based on this attribute, a browser may restrict the characters that are entered by the user in the form. However, none of the major browsers impose this restriction. The character encoding of the user input can be any <strong>one</strong> of those that are listed in the <code>accept-charset</code> attribute.</p><p>Here is a list of character encodings <a href="http://www.w3schools.com/TAGS/ref_charactersets.asp">http://www.w3schools.com/TAGS/ref_charactersets.asp</a></p>
<p>Example: <code><form action="" accept-charset="ISO-8859-1,ISO-8859-2"></code></p></dd>
<dt><code>action</code></dt>
<dd><p>This is a required attribute. Its value is the URL of the web page or application that will process the form. If the value is left blank, then the browser submits the form to the current page.</p><p>Example: <code><form action="contact.php">…</form></code></p></dd>
<dt><code>enctype</code></dt>
<dd><p>This attribute specifies the content type used to submit the form to the server when the form uses <code>post</code> to submit the form to the server (<code>method=post</code>). There are three possible values for the <code>enctype</code> attribute:</p>
<dl>
<dt><code>application/x-www-form-urlencoded</code></dt>
<dd><p>This is the default content type for <code>post</code> and the only encoding of <code>get</code>. With URL encoding, and the <code>get</code> method, the following ASCII characters get encoded as shown in the table:</p>
<table border="1">
<tr><th>Symbol</th><th>URL-Encoded</th></tr>
<tr><td>space</td><td>+</td></tr>
<tr><td>@</td><td>%40</td></tr>
<tr><td>#</td><td>%23</td></tr>
<tr><td>$</td><td>%24</td></tr>
<tr><td>%</td><td>%25</td></tr>
<tr><td>&</td><td>%26</td></tr>
<tr><td>-</td><td>%2B</td></tr>
<tr><td>+</td><td>%3D</td></tr>
<tr><td>:</td><td>%3A</td></tr>
<tr><td>;</td><td>%3B</td></tr>
<tr><td>,</td><td>%2C</td></tr>
<tr><td>?</td><td>%3F</td></tr>
<tr><td>/</td><td>%2F</td></tr>
</table>
<p>If the method is <code>post</code>, in addition to the above mentioned characters, the following characters are encoded:</p>
<table border="1">
<tr><th>Symbol</th><th>URL-Encoded</th></tr>
<tr><td>~</td><td>%7E</td></tr>
<tr><td>`</td><td>%60</td></tr>
<tr><td>!</td><td>%21</td></tr>
<tr><td>^</td><td>%5E</td></tr>
<tr><td>(</td><td>%28</td></tr>
<tr><td>)</td><td>%29</td></tr>
<tr><td>|</td><td>%7C</td></tr>
<tr><td>\</td><td>%5C</td></tr>
<tr><td>{</td><td>%7B</td></tr>
<tr><td>[</td><td>%5B</td></tr>
<tr><td>}</td><td>%7D</td></tr>
<tr><td>]</td><td>%5D</td></tr>
<tr><td>"</td><td>%22</td></tr>
<tr><td><</td><td>%3C</td></tr>
<tr><td>,</td><td>%2C</td></tr>
<tr><td>></td><td>%3E</td></tr>
</table>
</dd>
<dt><code>text/plain</code></dt>
<dd>This encoding only converts spaces to "+" characters. This value has an effect only for <code>post</code> requests. <code>get</code> requests are URL-encoded regardless of the <code>enctype</code> value.</dd>
<dt><code>multipart/form-data</code></dt>
<dd>This Content Type is required when the form has a file upload form control. With this value, the form data is not encoded at all.</dd>
</dl>
</dd>
<dt><code>method</code></dt>
<dd><p>This attribute specifies the method that will be used to submit the form data. It can take the following values:</p>
<dl>
<dt><code>get</code></dt>
<dd>This is the default when there is no <code>method</code> attribute or when it is blank. With <code>get</code>, a question mark (?) is appended to the end of the URL of the form application and then the form data is appended. The form data consists of the value of the <code>name</code> attribute followed by an equals sign and the data of the form control. Subsequent name-value pairs are separated by ampersands (&). The value of the form controls are URL-encoded.</dd>
<dt><code>post</code></dt>
<dd>With this method the form data is sent as an HTTP <code>post</code> request. When the <code>enctype</code> is <code>application/x-www-form-urlencoded</code>, the form data is encoded as described earlier. When the <code>enctype</code> is <code>text/plain</code> the data is not encoded except for the space character which is encoded as the plus (+) character. When the <code>enctype</code> is <code>multipart/form-data</code>, the form data is not encoded at all.</dd>
</dl>
</dd>
<dt><code>target</code></dt>
<dd><p>Transitional DTDs allow the <code>form</code> tag to have the <code>target</code> attribute. With this attribute, you can specify the name of the window in which the form result should open.</p>
<p>The <code>target</code> attribute is also useful in frame documents. Using this attribute, a form in one frame can show its results in another.</p>
<h5>Special Targets</h5>
<p>There are four special <code>target</code> values:</p>
<dl>
<dt><code>_blank</code></dt>
<dd>This target causes the form results to always open in a new window. The new window will not have an internal name.</dd>
<dt><code>_self</code></dt>
<dd>This target causes the form results to always load in the same window or frame as the form. This is the default behavior of forms.</dd>
<dt><code>_parent</code></dt>
<dd>This causes the form results to open in the parent of the document that contains the link. This is useful when using iframes.</dd>
<dt><code>_top</code></dt>
<dd>This causes the form results to open in the topmost frame in the hierarchy.</dd></dl></dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-75247735615152212692010-12-13T23:49:00.002+05:302010-12-17T19:25:31.003+05:30The font Element<p>This is a deprecated element that was formerly used to specify the font-family, font size, and the color of the text within it. The CSS properties <code>font</code>, <code>font-family</code>, <code>font-size</code>, and <code>color</code> should be used instead of the <code>font</code> element.</p>
<h4>Attributes</h4>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">Core Attributes</a></dt>
<dd>The core attributes can be applied to this element.</dd>
<dt>color</dt>
<dd>The color of the text can be specified in hexadecimal notation or by color name.</dd>
<dt>face</dt>
<dd>The typeface (font-family) can be specified as a list of comma separated names.</dd>
<dt>size</dt>
<dd>A number between 1 and 7.</dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-9667979820732404392010-11-23T15:27:00.000+05:302010-11-23T15:27:30.386+05:30The fieldset and legend Elements<p>The <code>fieldset</code> element is used to group related form elements together. It is a block element. Therefore its parent elements can be <code>div</code>, <code>form</code> etc. It can contain both block and inline elements as child elements. <code>fieldset</code> elements can be nested within each other.</p>
<p>The <code>legend</code> element is a required child element of <code>fieldset</code>. It is an inline element that contains a name for the group of elements contained by <code>fieldset</code>. A <code>fieldset</code> element can contain only one <code>legend</code> element.</p>
<p>Example: <code style="white-space:pre-wrap">
<form action="">
<p>One form Element: <input type="text" id="test1"></p>
<p>Two form element: <input type="text" id="test2"></p>
<p>Three form element: <input type="text" id="test3"></p>
<fieldset>
<legend>test 2</legend>
<p>Oneone form element: <input type="text" id="test21"></p>
<p>Onetwo form element: <input type="text" id="test22"></p>
<p>Onethree form element: <input type="text" id="test23"></p>
</fieldset>
<p><input type="submit" id="submit1"></p>
</form></code></p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg13JRZtdb8jW5XdjGiL0SBCQ4bEoJuy0UkK6U0xa3OFMY8vEJ4SO-yCcfFd6vjDBlOz-A6wWybdy2z__61icWsX382QJFERXJ0kl7z2mztOSuvSdBp32JLie0q3jr8d1qKGJpgplDCOODJ/s1600/fieldset.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg13JRZtdb8jW5XdjGiL0SBCQ4bEoJuy0UkK6U0xa3OFMY8vEJ4SO-yCcfFd6vjDBlOz-A6wWybdy2z__61icWsX382QJFERXJ0kl7z2mztOSuvSdBp32JLie0q3jr8d1qKGJpgplDCOODJ/s320/fieldset.png" width="179" /></a></div>
<p>The above image shows how the code is rendered in Firefox. Note how the text of the <code>legend</code> element appears at the top left side of the grouped form elements.</p>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-67997331764316650442010-09-16T20:23:00.003+05:302010-12-29T20:08:42.603+05:30Internet Explorer Conditional Comments<p>With Internet Explorer Conditional Comments, one can hide HTML code from Internet Explorer, or reveal code only to Internet Explorer. The conditional comment code consists of Internet Explorer's proprietary code within HTML comments. Since the proprietary code is within conditional comments, it is hidden from all other browsers. IE Conditional Comments does not cause a page to become invalid.</p>
<p>Example 1: <code><br><!--[if IE]><br><p>You are an Internet Explorer user.</p><br><![endif]--></code></p>
<p>In the above example, the <code>p</code> element only appears in Internet Explorer. All other browsers treat the entire piece of code as an HTML comment.</p>
<p>Specific versions of Internet Explorer or all versions above or below a particular version can be targeted using <dfn>operators</dfn></p>
<p>Example 2: <code><br><!--[if lte IE 7]><br><p>You are using an outdated version of Internet Explorer.</p><br><![endif]--></code></p>
<p>In the above example, <code>lte</code> is the operator. It stands for "less than or equal to".</p>
<p>Here is a list of Operators and their meanings</p>
<table border="1">
<tr><th>Operator</th><th>Meaning</th><th>Example</th></tr>
<tr><td><code>!</code></td><td>The NOT operator</td><td><code><!--[if !(IE 9)]></code></td></tr>
<tr><td><code>lt</code></td><td>The less-than operator</td><td><code><!--[if lt IE 9]></code></td></tr>
<tr><td><code>lte</code></td><td>The less-than-or equal to operator</td><td><code><!--[if lte IE 8]></code></td></tr>
<tr><td><code>gt</code></td><td>The greater-than operator</td><td><code><!--[if gt IE 8]></code></td></tr>
<tr><td><code>gte</code></td><td>The greater-than-or equal to operator</td><td><code><!--[if gte IE 8]></code></td></tr>
<tr><td><code>&</code></td><td>The AND operator</td><td><code><!--[if (lte IE 8)&(gte IE 6)]></code></td></tr>
<tr><td><code>|</code></td><td>The OR operator</td><td><code><!--[if (IE 8)|(IE 6)]></code></td></tr>
</table>
<p>To hide HTML code from Internet Explorer, use the format shown below:</p>
<p>Example 3: <code><br><!--[if !IE]><!--><br><p>You are not using Internet Explorer.</p><br><!--><![endif]--></code></p>
<p>To hide HTML code from only certain versions of Internet Explorer, use the format shown below:</p>
<p>Example 4: <code><br><!--[if IE 9]><!--><br><p>You are using a modern browser.</p><br><!--><![endif]--></code></p>
<p>More information can be found at <a href="http://msdn.microsoft.com/en-us/library/ms537512(v=VS.85).aspx">MSDN</a>.</p>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-31660843030084277362010-08-30T22:27:00.000+05:302010-08-30T22:27:08.392+05:30The <embed> and <noembed> Elements<p>The <code>embed</code> element is a non-standard element that is used
to embed multimedia content into a webpage.
Often, the multimedia content will require browser plugins like
Flash Player, QuickTime Player etc.</p>
<p>The <code>embed</code> element is not part of any current
(X)HTML standard except the unfinalized HTML 5. The recommended element
for embedding media objects is the <code>object</code> element, which
is part of the HTML 4.01 and XHTML 1.0 Standard.</p>
<p>The <code>embed</code> element can have a block or inline parent element.</p>
<h4>Attributes</h4>
<dl>
<dt><code>align</code></dt>
<dd>This attribute can take the values <code>left</code>, <code>right</code>,
<code>top</code> and <code>bottom</code>. However, it is perferable to use
CSS instead of this attribute.</dd>
<dt><code>height</code> and <code>width</code></dt>
<dd>Specifies the height and width of the element. It is perferable to use CSS instead
of these attributes.</dd>
<dt><code>name</code> and <code>id</code></dt>
<dd>These attributes specify a name for the embedded object. However, it is better
to use only the <code>id</code> attribute because <code>name</code> is deprecated
in XHTML.</dd>
<dt><code>hidden</code></dt>
<dd>This attribute can take the values <code>yes</code> or <code>no</code>.
A value of <code>yes</code> hides the object. This is not a well supported attribute and
must therefore be avoided.</dd>
<dt><code>pluginspage</code></dt>
<dd>The value of this attribute is a URL of a page that contains instructions on
how to download and install the plugin required to render the embedded content.
This attribute is obsolete.</dd>
<dt><code>hspace</code> and <code>vspace</code></dt>
<dd>These attributes were used to specify the amount of horizontal and vertical
space that should be left clear of the embedded object. It is preferable to use
CSS instead of these attributes.</dd>
<dt><code>src</code></dt>
<dd>The value of this attribute is the URL of the file or object to be embedded.</dd>
<dt><code>type</code></dt>
<dd>The value of this attribute is the MIME type of the embedded object. However,
the browser can also determine the type of object by the file extension of the file
specified by <code>src</code> or by the header sent by the server when the object
is accessed.</dd>
</dl>
<p>HTML 5 allows any other attributes that are specific to the kind of object embedded.</p>
<h4>The <code>noembed</code> Element</h4>
<p>This is a nonstandard child element of the <code>embed</code> element. It contains
text, images or objects that are displayed when the embedded object cannot be displayed.</p>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-51268356765276875912010-08-03T20:57:00.002+05:302010-08-30T21:02:24.708+05:30The <em> and <strong> Elements<p>The <code>em</code> element is used
to indicate text that is emphasized. All major browsers render
emphasized text in italics.</p>
<p>Example 1: <br><code><p>This is <em>the</em> website for web design information.</p></code></p>
<p>The <code>strong</code> element
is used to strongly emphasize the enclosed text. All major browsers render
the text within this element with a boldface font.</p>
<p>Example 2: <br><code><p>This product has a <strong>lifetime</strong> warranty.</p></code></p>
<h4>Attributes</h4>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">Core Attributes</a></dt>
<dd><p>The core attributes can be applied to this element.</p></dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-58812274977578775252010-08-03T20:35:00.000+05:302010-08-03T20:35:41.701+05:30The <div> Element<p>The <code>div</code> element is used
to structurally divide a document into sections. A <code>div</code>
contains elements that are semantically related. A <code>div</code> can
contain any element that is normally found in the
<code>body</code> element.</p>
<p>A <code>div</code> is a block-level element. However, it can also contain text and inline child elements.</p>
<p>A beneficial side effect of grouping semantically
related elements is they can be styled as one unit using CSS.
The best way of doing this is by using a <code>div</code>
with an <code>id</code> or <code>class</code>attribute.
These attributes are used to identify the
<code>div</code> when applying CSS.</p>
<p>Example: <br><code><div class="body_content"><br>
<p> ... </p><br>
...<br>
</div></p>
</code>
<h4>Attributes</h4>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">Core Attributes</a></dt>
<dd><p>The core attributes can be applied to this element.</p></dd>
<dt>align</dt>
<dd><p>This attribute can take the values <code>center</code>, <code>left</code>, and <code>right</code>. However, this attribute is deprecated in favor of the CSS <code>text-align</code> property.</p>
<p></p></dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-46027650249125254552010-08-03T19:52:00.000+05:302010-08-03T19:52:42.926+05:30The <dir> Element<p>The <code>dir</code> element was originally intended for multi-column
lists. However, this element has now been deprecated. The <code>ul</code>
and the <code>ol</code> elements can be used instead.</p>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-41842215415403917442010-08-03T19:24:00.000+05:302010-08-03T19:24:45.975+05:30The <dfn> tag<p>The <code>dfn</code> element is used to indicate the <dfn>defining instance</dfn>
of the special term or phrase. A defining instance is the first occurrence of a term or phrase.</p>
<p>It is an inline element.</p>
<p>Most browsers render the enclosed text in italics. However, Chrome and Safari render the text normally.</p>
<p>Example: <br><code><p>The <dfn>386</dfn> was Intel's first 32-bit processor.</p></code></p>
<h4>Attributes</h4>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">Core Attributes</a></dt>
<dd><p>The core attributes can be applied to this element.</p></dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-340975961160886492010-08-03T18:50:00.001+05:302010-08-03T18:51:07.452+05:30The <ins> and <del> Elements<p>These two elements are useful when editing HTML documents.</p>
<dl>
<dt>The <code>ins</code> Element</dt>
<dd><p>This element is used to contain inline or block-level content that
have been added to a pre-existing document. It indicates that the content was added sometime after the creation of the
original document. When used with inline text or inline child elements, browsers underline the inserted text.
With block-level elements, Firefox renders them as usual whereas IE7, Safari and Opera underline them.</p></dd>
<dt>The <code>del</code> Element</dt>
<dd><p>This element is used to contain inline or block-level content that should be
deleted or content that should be considered deleted.
When used with inline elements, all major browsers render the enclosed text with a line through.
When used with child block elements, Firefox renders the text as usual whereas IE7, Safari
and Opera render it with a line through.</p></dd>
</dl>
<h4>Attributes</h4>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">Core Attributes</a></dt>
<dd><p>The core attributes can be applied to these elements.</p></dd>
<dt><code>cite</code></dt>
<dd><p>This attribute's value is a URL of a document that explains the reason for insertion or deletion.</p></dd>
<dt><code>datetime</code></dt>
<dd><p>This attribute's value contains the date, time and timezone
of the insertion or deletion. The format of the value
is YYYY-MM-DD<strong>T</strong>hh:mm:ssTZD</p>
<p>Example:<code> <del datetime="2008-08-06T16:32+5:30"></code></p>
<p>The format for the date is <code>YYYY-MM-DD</code>. This is followed by the capital letter "T".
After this is the time in 24-hour format - <code>hh:mm:ss</code>. This is followed by the time zone.
If the time zone is GMT then the code is "Z". Example: "2008-08-06T16:32Z".
For all other time zones, there is a positive or negative time in the format <code>hh:mm</code> to indicate
how many hours and minutes it is ahead or behind GMT. Example: "2008-08-06T16:32+5:30"</p></dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-31849686046083036892010-08-03T17:23:00.000+05:302010-08-03T17:23:30.197+05:30Definition Lists: the <dl>, <dt>, and <dd> Elements<p>A Definition List contains one or more terms and their definitions. However, they can be used for any
data that consists of a word or phrase and a longer description of it. For example, the names of people in a
conversation can be the definition term and the words they speak can be the description. Or the ingredients of a recipe can be the terms
and the details of preparation the descriptions.</p>
<p><a href="http://www.w3.org/TR/html401/struct/lists.html">http://www.w3.org/TR/html401/struct/lists.html</a> has a good description of Definition Lists</p>
<h4>General Form of a Definition List</h4>
<p><code><p><code><dl><br>
<dt>Definition Term</dt><br>
<dd>Definition Description</dd><br>
<br>
...<br>
<br>
</dl></code></p></code></p>
<p>A definition list consists of the following elements:</p>
<dl>
<dt>The <code>dl</code> Element</dt>
<dd><p>This is the parent element of the definition term and definition description elements. Therefore this element can only
contain <code>dt</code> and <code>dd</code> elements.</p></dd>
<dt>The <code>dt</code> Element</dt>
<dd><p>This element contains the term of the definition. It can only contain inline elements</p></dd>
<dt>The <code>dd</code> Element</dt>
<dd><p>This element contains the definition description. It can have block or inline child elements.</p></dd>
</dl>
<h4>Attributes</h4>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">Core Attributes</a></dt>
<dd><p>The core attributes can be applied to the <code>dl</code>, <code>dt</code>, and <code>dd</code> elements.</p></dd>
</dl>
<p>Most web browsers render the definition description indented from the left margin (when the language is English).</p>
<p>There can be more than one <code>dt</code> element (more than one term) with one <code>dd</code> element and vice versa.</p>
<p>Example: <code><br>
<dl><br>
<dt>HTML</dt><br>
<dt>XHTML</dt><br>
<dd><p>A language that provides a semantic description (meaning) for the content of a document.</p></dd><br>
</dl>
</code></p>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-26550655548801109302010-08-02T23:56:00.001+05:302010-08-03T16:30:33.060+05:30The <col> and <colgroup> Elements<p>The <code>col</code> element is used to define columns in a table. It is an empty element and can only be
used within the <code>table</code> element where is should appear before any <code>tr</code> elements.
In (X)HTML, tables are constructed with rows, therefore the <code>col</code> element is useful because it allows one
to define and then style columns instead of rows or individual cells.</p>
<p>According to the <a href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-COL">w3.org specification</a>,
the <code>col</code> element does not group columns structurally (semantically). Structural grouping is specified
by the <code>colgroup</code> element. A table can have more than one <code>colgroup</code> elements.</p>
<p>The <code>colgroup</code> element specifies structural (semantic) columns in a table. This element may contain
<code>col</code> child elements. The <code>colgroup</code> element is always found in the <code>table</code> element,
and should appear before any <code>tr</code> elements.</p>
<p>Using this element, it is possible to apply attributes and styles to groups of columns.</p>
<h4>Attributes</h4>
<p>Both <code>col</code> and <code>colgroup</code> elements can have the following attributes.</p>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">Core Attributes</a></dt>
<dd><p>The core attributes can be applied to this element.</p></dd>
<dt><code>align</code></dt>
<dd><p>This attribute specifies the horizontal text alignment in the column. It
can take the values <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>, or
<code>char</code>. When <code>align="char"</code>, the text is, by default, aligned around the decimal point character
for the current language, or the character specified in the <code>"char"</code> attribute.</p>
<p>Note: Though this attribute is not deprecated, to set text alignment, the CSS property <code>text-align</code> is preferred.</p></dd>
<dt><code>char</code></dt>
<dd>The value of this attribute is a single character around which the text is aligned when <code>align="char"</code>.</dd>
<dt><code>charoff</code></dt>
<dd><p>When present, this attribute specifies the offset to the first occurrence of the alignment character on each line.
Source: <a href="http://www.w3.org/TR/REC-html40/struct/tables.html#adef-charoff">w3.org</a></p></dd>
<dt><code>span</code></dt>
<dd><p>The value of this attribute is a number. This specifies how many columns are spanned by the current <code>col</code>
element.</p></dd>
<dt><code>valign</code></dt>
<dd><p>Specifies the vertical alignment of the text in the cells of the column. It can take
the values of <code>top</code>, <code>middle</code>, <code>bottom</code>, and <code>baseline</code>.</p>
<p>Though this attribute has not been deprecated, the CSS property <code>vertical-align</code> is preferred.</p></dd>
<dt><code>width</code></dt>
<dd><p>This attribute can take pixel values, percentage values, or values in the form <code>n*</code>, where <var>n</var> is a number. This
attribute specifies the width of the column. When the value is in the form of <code>n*</code>, for example <code>3*</code>,
the current column is n-times wider than the other columns. <code>0*</code> sets the column width to the minimum necessary to
accommodate the contents.</p><p>Though this attribute has not been deprecated, using the CSS <code>width</code> property.</p></dd>
</dl>
<p>Example 1: <code><br><table><br>
<caption>the table caption</caption><br>
<col style="background-color:red" /><br>
<col /><br>
<col style="background-color:navajowhite" /><br>
<col span="2" style="background-color:darkslategray" /><br>
<tr><th>heading</th> <th>heading2</th> <th>heading3</th></tr><br>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr><br>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr><br>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr><br>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr><br>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr><br>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr><br>
</table></code>
</p>
<p>Example 2:<br>
<code><table><br>
<caption>the table caption 2</caption><br>
<colgroup><br>
<col span="2" style="background-color:red" /><br>
</colgroup><br>
<colgroup span="3" style="background-color:cornsilk"></colgroup><br>
<tr><th>heading</th> <th>heading2</th> <th>heading3</th></tr><br>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr><br>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr><br>
<tr><td>col</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr><br>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr><br>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr><br>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr><br>
</table></code>
</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJT725PDYQRqQ7C0lE4zzaoKUoQbInMUe-VYaQoNqK0TtESxIdo38SA_fTKp4DXAbifCpmw51tI1JlVOxDMPii_ttZYUO0IQd0pDRffe0ZvelO23Xa0K0X4UO-7lTJZgnabZ8wdp8K91xo/s1600/col_and_colgroup.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" alt="col and colgroup example" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJT725PDYQRqQ7C0lE4zzaoKUoQbInMUe-VYaQoNqK0TtESxIdo38SA_fTKp4DXAbifCpmw51tI1JlVOxDMPii_ttZYUO0IQd0pDRffe0ZvelO23Xa0K0X4UO-7lTJZgnabZ8wdp8K91xo/s320/col_and_colgroup.png" /></a></div>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-81934832745454905082010-07-26T21:28:00.000+05:302010-07-26T21:28:27.760+05:30The <code> Element<p>The <code>code</code> element is meant to contain text that represents computer code such as programming code or html code.
It is an inline element.
Browsers render this element in a monospace font such as Courier.</p>
<h4>Attributes</h4>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">Core Attributes</a></dt>
<dd><p>The core attributes can be applied to this element.</p></dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-496365215923437692010-07-26T20:58:00.001+05:302010-07-26T21:26:01.443+05:30The <cite> Element<p>The <code>cite</code> element is used to indicate citations. It is an inline element. Citations can be from websites, magazines, books etc. The citation text is rendered in italics in most browsers.</p>
<p>When citing a web page, you can nest the <code>cite</code> element in an <code>a</code> element.</p>
<p>Example: <code><p>The best beginner's book on HTML and CSS that I have read is <cite>Head First HTML</cite></p></code></p>
<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeFYcxl6W-_vFYqYYwnkZ_0MW7Rk9vTV09NzZITO-PpwhI9OpXbdfjS8bNbh8Z0T_5EXM4B2448EiJJgTzJXNrHPNQY-UJx8jKYxY8V8dvkHz38O2C33TeSbHAmNRiAFr61xeSYo-bSllQ/s1600-h/cite.GIF"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeFYcxl6W-_vFYqYYwnkZ_0MW7Rk9vTV09NzZITO-PpwhI9OpXbdfjS8bNbh8Z0T_5EXM4B2448EiJJgTzJXNrHPNQY-UJx8jKYxY8V8dvkHz38O2C33TeSbHAmNRiAFr61xeSYo-bSllQ/s320/cite.GIF" id="BLOGGER_PHOTO_ID_5232566620811114162" alt="cite screenshot" border="0" /></a></p>
<h4>Attributes</h4>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">Core Attributes</a></dt>
<dd><p>The core attributes can be applied to this element.</p></dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-84326041017253706702010-07-26T20:50:00.000+05:302010-07-26T20:50:50.850+05:30The <center> ElementThe <code>center</code> element horizontally centers its contents. It is a block element. This element is deprecated. Use CSS instead.Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-62151645799829077342010-07-26T20:36:00.000+05:302010-07-26T20:36:44.345+05:30The <caption> Element<p>The <code>caption</code> element is used to caption tables. A <dfn>caption</dfn> is a
short description of the contents of the table. The <code>caption</code> element must
appear immediately after the <code><table></code> tag, there should be no other
elements or text in between.</p>
<p>Example: <code><table><caption>the table caption</caption><tr><th>heading</th></tr><tr><td>row 1</td></tr></table></code></p>
<h4>Attributes</h4>
<dl>
<dt><a href="http://destination-code.blogspot.com/2010/07/xhtml-core-attributes-dir-class-id-lang.html">Core Attributes</a></dt>
<dd><p>The core attributes can be applied to this element.</p></dd>
<dt><code>align</code></dt>
<dd><p>This deprecated attribute specifies the position of the caption.
Takes the values <code>top</code>,<code>bottom</code>,<code>left</code>,and <code>right</code>.
The CSS property <code>caption-side</code> is preferred instead of this attribute.
</p></dd>
</dl>Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0tag:blogger.com,1999:blog-2264615378200805267.post-1934142017795366932010-07-26T18:34:00.001+05:302010-07-27T00:00:00.541+05:30The <button> Element<p>The <code>button</code> element is used to submit or clear forms, or to perform an
action using Javascript. Unlike <code>input</code> element, which is also used to create
buttons, <code>button</code> is not an empty element and therefore all its content serves as the button.
The <code>button</code> element can contain almost any element, inline or block. The exceptions are
the <code>a</code>, <code>form</code>, <code>fieldset</code>, <code>input</code>,
<code>select</code>, <code>textarea</code>, <code>label</code> and <code>button</code>.
<p>The <code>button</code> element, like inline elements, needs to have a block parent element such
as <code>p</code> or <code>div</code>. Unlike inline elements, however, it can contain child block elements.</p>
<p>Example: <code><form action="form.php"><div><button><p>the quick brown</p></button></div></form></code></p>
<h4>Attributes</h4>
<dl>
<dt><code>disabled="disabled"</code></dt>
<dd><p>With this attribute, the button is disabled (grayed-out).</p></dd>
<dt><code>type</code></dt>
<dd><p>The value of this attribute can be <code>submit</code>, which submits the form that the button is contained in, <code>reset</code>,
which clears all the form's entries, or <code>button</code> which is used when the action is defined by Javascript. Without
the type attribute, <code>button</code> functions like a submit button.</p></dd>
<dt><code>name</code></dt>
<dd><p>This specifies the control name of the button.</p></dd>
<dt><code>value</code></dt>
<dd><p>The value of this attribute is sent together with the control name of the button.</p>
<p>Example: <code><form action="test.php"><p><button name="somename" value="somevalue">the quick brown</button></p></form></code></p>
<p>When the button is clicked it will send <code>test.php?somename=somevalue</code></p></dd>
</dl>
<!--a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfuATZzVz43lVnYr5ks7wfiDRf7X53CoCOhYUcWuc3bRqcEJEblm_rK-aP5j2U4A-NybqXFWwCkXQpmVRnN8lWXUSi8NK8JA0rEwuL0oXdzB1F39k-OmSVCL_a9tiqFVCpJOvS8KGA9uZr/s1600-h/button+button.JPG"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfuATZzVz43lVnYr5ks7wfiDRf7X53CoCOhYUcWuc3bRqcEJEblm_rK-aP5j2U4A-NybqXFWwCkXQpmVRnN8lWXUSi8NK8JA0rEwuL0oXdzB1F39k-OmSVCL_a9tiqFVCpJOvS8KGA9uZr/s320/button+button.JPG" alt="" id="BLOGGER_PHOTO_ID_5224279237319689970" border="0" /></a><br />You can mix text and images.-->Chetan Crastahttp://www.blogger.com/profile/14826974835809306712noreply@blogger.com0