Destination-Code - Chetan Crasta's XHTML, HTML and CSS Notes

The img Element

2011-01-06T23:35:00.000+05:30

The img 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 src attribute. Any image format that the browser supports can be used. Common formats are JPEG, PNG and GIF.

The src and alt attributes are required.

Attributes

Core Attributes

The core attributes can be applied to this element.

align

This is a deprecated attribute. It specifies the alignment of the image. Its value can be bottom, or left, or middle, or right, or top. Since this a presentational attribute, it is preferable to use CSS instead.

bottom: Aligns the image to the baseline
middle: Aligns the vertical middle of the image to the baseline
top: Aligns the top of the image to the top of the line box.
left: Aligns the image to left edge of the line box
right: Aligns the image to the right edge of the line box

alt

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.

border

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 border property instead.

height

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 height property instead.

hspace

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 margin property instead.

ismap

This attribute takes only one value and is specified as follows: ismap="ismap". It indicates that the image is part of an server-side image map.

longdesc

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 longdesc.

name

This attribute is deprecated in XHTML. It is better to use the id or class attribute in both HTML and (X)HTML documents.

src

This is a required attribute. Its value is the URI of the image that is to be embedded.

usemap

This attribute is used to specify the map element that contains the client-side image map information of the iamge. The value of this attribute is the name (in case of HTML) or the id (in case of XHTML), prefixed with a hash (#) of the map element.

vspace

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 margin property instead.

width

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 width property instead.

Inline Frames

2011-01-06T14:52:00.001+05:30

Inline Frames, specified by the iframe 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 src attribute, is displayed in a rectangular frame.

iframe 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.

Only the transitional doctypes allow Inline Frames.

Attributes

Core Attributes: The core attributes can be applied to this element.
align: This is a deprecated attribute. It specifies the alignment of the Inline Frame within its parent element. It can have a value of top, or middle, or bottom, or left, or right. Since it is a presentational attribute, CSS should be used instead.
frameborder: This attribute can have a value of 1 or 0 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.
height and width: 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 height or width property instead.
longdesc: 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.; Example: <iframe src="fr.html" longdesc="frdesc.html">
marginheight: 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.
marginwidth: 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.
name: This attribute assigns a name to the Inline Frame so that it can be targetted by links having the target attribute.
scrolling: This attribute can take one of these values: yes,no or auto. With yes, scrollbars are always show whether they are needed or not. With no, scrollbars are never shown. With auto, scrollbars are shown when needed, this is the default.
src: The value of this attribute is a URL that specifies the initial file that will be displayed in the frame. The src attribute can refer to any file, even to another frameset document.

The i Element

2011-01-06T01:05:00.001+05:30

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 em or strong element should be used with the presentation handled by CSS.

Attributes

Core Attributes: The core attributes can be applied to this element.

The html Element

2011-01-06T00:55:00.001+05:30

The html element is topmost in the hierarchy of (X)HTML elements and is known as the root element. Therefore all (X)HTML elements are descendants of the html element. The html element appears after the Document Type Declaration.

The head and the body elements, and, in the case of a Frameset document, the frameset element are the only child elements of html.

Example: <html lang="en">

Attributes

lang and xml:lang: These attributes specifiy the language of the contents of the document. See this page for more information.
dir: See this page.
id: This attribute is used to uniquely name the html element. It is allowed on the html element only when the doctype is XHTML.
version: 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.
xmlns: This is a required attribute in XHTML documents. It specifies the XML namespace of the document.

The hr Element

2011-01-06T00:10:00.000+05:30

The hr 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 hr element.

Attributes

Core Attributes: The core attributes can be applied to this element.
align: This is a deprecated attribute. It can take the value center or left or right. 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.
noshade: This is a deprecated attribute. This attribute is specified as noshade="noshade". It displays the rule with one solid color, instead of the default 3D shade.
size: This is a deprecated attribute. Its value, a number, specifies the height (thickness) of the rule.
width: 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.

The head Element

2011-01-05T22:44:00.003+05:30

The head 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.

The head element must contain one title element.

These are the elements that head can contain:

title
base
meta
script
link
style
object

There can be only one title and base element. However, the other elements can be present multiple times.

Attributes

lang and xml:lang: These attributes specifiy the language of the contents of the head element. However, this attribute is more often specified for the html element. See this page for more information.
dir: See this page.
id: This attribute is used to uniquely name the head element. It is allowed on the head element only when the doctype is XHTML.
profile: The value of this attribute is the URI of a document that provides more information of the meta element's content attribute.

Here is the W3.org's HTML 4 specification page for the head element.

The h1, h2, h3, h4, h5 and h6 Elements

2011-01-04T17:18:00.000+05:30

The h1, h2, h3, h4, h5 and h6 elements are used on headings. A heading 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 h1 to h6. h1 is at the top most of the hierarchy and h6 is at the lowest.

These are block elements that can only have inline elements as their child elements.

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 h1 element, the next heading element should be h2 not any other heading element like h3.

An heading element can contain an image if the image's content describes the content of the document section.

Attributes

Core Attributes: The core attributes can be applied to this element.
align: This is a deprecated attribute. It can take as values either center, left, and right. The CSS property text-align should be used instead of this property.

The frameset, frame, and noframes Elements

2011-01-03T17:29:00.002+05:30

With HTML frames one can display multiple HTML documents at once. Each HTML document is displayed in a frame. A frame is created using the frame element and usually occupies only a part of the viewport. The frame elements are contained within a frameset document. A frameset document specifies the dimensions and layout of the frames. A frameset document uses a frameset doctype:

HTML 4.01 Frameset Document Type Definition: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Frameset Document Type Definition: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Instead of the body element, a frameset document contains the frameset element. This frameset element can contain the frame element, the noframes element or even more frameset elements.

The `frameset` Element

This element is the container for the frame elements of a frames document. In a framset document, it takes the place of the body element. Frameset elements can be nested within each other. Therefore, a frameset can contain both frame elements and frameset elements.

Example 1: <!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>

Attrbutes

Core Attributes

The core attributes can be applied to this element.

cols

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.

Number values

Number values specify the widths of the columns in pixels. Example: <frameset cols="200,400,200">

Percentage Values

These specify the width of the columns as a percentage of the width of the viewport. Example: <frameset cols="20%,70%,10%">

Relative Length Values

An asterisk (*) specifies that the column should use all the available space.: Example: <frameset cols="100px,70%,*">
Asterisks that are prefixed with numbers are used to specify ratios.: Example: <frameset cols="2*,7*,*">
In the above example, the ratio of the widths of the three columns are 2:7:1.: 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.
Example: <frameset cols="200,5*,2*">

rows

This takes the same values as cols, but specifies the height of rows.

Example: <frameset rows="200,400,200">

The rows and cols attributes can be used together to specify both rows and columns in a frameset.

Example: <frameset cols="100,200" rows="50%,50%">

border

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.

bordercolor

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.

frameborder

This is a nonstandard attribute. However, this attribute is standard on the frame element. Therefore, it is preferable not to use this attribute on the frameset element.

The value of this attribute can be 1 or yes to display the borders, or 0 or no to hide the borders. Opera does not support this attribute.

The `frame` Element

The frame 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.

Attrbutes

Core Attributes: The core attributes can be applied to this element.
src: The value of this attribute is a URL that specifies the initial file that will be displayed in the frame. The src attribute can refer to any file, even to another frameset document.; Example: <frame src="../folder/file.html">
bordercolor: This is a nonstandard attribute. This attribute specifies the color of the frames borders. The bordercolor specified on the frame element overrides the color specified by bordercolor on the parent frameset element.
frameborder: This is a nonstandard attribute. The value of this attribute can be 1 or yes to display the borders, or 0 or no to hide the borders. Opera does not support this attribute. The value of this attribute on the frame element does not override the value specified on the frameset element.
longdesc: 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 longdesc.; Example: <frame src="fr.html" longdesc="frdesc.html">
marginheight: 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.
marginwidth: 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.
name: This attribute is used to name a frame. It allows links in one frame to load documents into another using the target attribute on a elements.
noresize: This attribute can have only one value, like this: noresize="noresize". When this attribute is present, it prevents the user from resizing the frame. Note that in a three-column or three-row layout, setting noresize="noresize" on the middle column or row prevents resizing of all the columns or rows.
scrolling: This attribute can take one of these values: yes,no or auto. With yes, scrollbars are always show whether they are needed or not. With no, scrollbars are never shown. With auto, scrollbars are shown when needed, this is the default.

The `noframes` Element

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 frameset. noframes is a flow element and can therefore contain both block and inline elements.

In an XHTML frameset document, this element must contain the body element. In an HTML frameset document, body is an optional child element.

Nesting Framesets

Frames can be nested in each other. There are two ways of doing this:

Putting a frameset document in a frame

A frameset document can be specified in the src attribute of the frame tag.


: The image above shows how a nested-frame webpage looks.

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.

Nesting frameset Elements

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

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.

Problems with frames

Bookmarking: 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.
Linking: 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.
Latency: 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.

The form Element

2010-12-21T22:35:00.000+05:30

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 form element is used to create a form. It contains various form controls. It is a block element and can have only block elements and the script element as children. form elements cannot be nested within each other.

These are the allowed child elements of form:

p
h1 to h6
ul and ol
pre
dl
div
noscript
blockquote
hr
table
fieldset
address
script

Attributes

Core Attributes

The core attributes can be applied to this element.

accept

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.

Example: <form action="" accept="image/gif, image/jpeg">

accept-charset

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 unknown, 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 one of those that are listed in the accept-charset attribute.

Here is a list of character encodings http://www.w3schools.com/TAGS/ref_charactersets.asp

Example: <form action="" accept-charset="ISO-8859-1,ISO-8859-2">

action

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.

Example: <form action="contact.php">…</form>

enctype

This attribute specifies the content type used to submit the form to the server when the form uses post to submit the form to the server (method=post). There are three possible values for the enctype attribute:

application/x-www-form-urlencoded

This is the default content type for post and the only encoding of get. With URL encoding, and the get method, the following ASCII characters get encoded as shown in the table:

Symbol	URL-Encoded
space	+
@	%40
#	%23
$	%24
%	%25
&	%26
-	%2B
+	%3D
:	%3A
;	%3B
,	%2C
?	%3F
/	%2F

If the method is post, in addition to the above mentioned characters, the following characters are encoded:

Symbol	URL-Encoded
~	%7E
`	%60
!	%21
^	%5E
(	%28
)	%29
\|	%7C
\	%5C
{	%7B
[	%5B
}	%7D
]	%5D
"	%22
<	%3C
,	%2C
>	%3E

text/plain

This encoding only converts spaces to "+" characters. This value has an effect only for post requests. get requests are URL-encoded regardless of the enctype value.

multipart/form-data

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.

method

This attribute specifies the method that will be used to submit the form data. It can take the following values:

get: This is the default when there is no method attribute or when it is blank. With get, 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 name 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.
post: With this method the form data is sent as an HTTP post request. When the enctype is application/x-www-form-urlencoded, the form data is encoded as described earlier. When the enctype is text/plain the data is not encoded except for the space character which is encoded as the plus (+) character. When the enctype is multipart/form-data, the form data is not encoded at all.

target

Transitional DTDs allow the form tag to have the target attribute. With this attribute, you can specify the name of the window in which the form result should open.

The target attribute is also useful in frame documents. Using this attribute, a form in one frame can show its results in another.

Special Targets

There are four special target values:

_blank: This target causes the form results to always open in a new window. The new window will not have an internal name.
_self: 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.
_parent: This causes the form results to open in the parent of the document that contains the link. This is useful when using iframes.
_top: This causes the form results to open in the topmost frame in the hierarchy.

The font Element

2010-12-13T23:49:00.002+05:30

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 font, font-family, font-size, and color should be used instead of the font element.

Attributes

Core Attributes: The core attributes can be applied to this element.
color: The color of the text can be specified in hexadecimal notation or by color name.
face: The typeface (font-family) can be specified as a list of comma separated names.
size: A number between 1 and 7.

The fieldset and legend Elements

2010-11-23T15:27:00.000+05:30

The fieldset element is used to group related form elements together. It is a block element. Therefore its parent elements can be div, form etc. It can contain both block and inline elements as child elements. fieldset elements can be nested within each other.

The legend element is a required child element of fieldset. It is an inline element that contains a name for the group of elements contained by fieldset. A fieldset element can contain only one legend element.

Example: <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>

The above image shows how the code is rendered in Firefox. Note how the text of the legend element appears at the top left side of the grouped form elements.

Internet Explorer Conditional Comments

2010-09-16T20:23:00.003+05:30

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.

Example 1: 

In the above example, the p element only appears in Internet Explorer. All other browsers treat the entire piece of code as an HTML comment.

Specific versions of Internet Explorer or all versions above or below a particular version can be targeted using operators

Example 2: 

In the above example, lte is the operator. It stands for "less than or equal to".

Here is a list of Operators and their meanings

Operator	Meaning	Example
`!`	The NOT operator	`<!--[if !(IE 9)]>`
`lt`	The less-than operator	`<!--[if lt IE 9]>`
`lte`	The less-than-or equal to operator	`<!--[if lte IE 8]>`
`gt`	The greater-than operator	`<!--[if gt IE 8]>`
`gte`	The greater-than-or equal to operator	`<!--[if gte IE 8]>`
`&`	The AND operator	`<!--[if (lte IE 8)&(gte IE 6)]>`
`\|`	The OR operator	`<!--[if (IE 8)\|(IE 6)]>`

To hide HTML code from Internet Explorer, use the format shown below:

Example 3:  <p>You are not using Internet Explorer.</p> 

To hide HTML code from only certain versions of Internet Explorer, use the format shown below:

Example 4:  <p>You are using a modern browser.</p> 

More information can be found at MSDN.

Symbol	URL-Encoded
~	%7E
`	%60
!	%21
^	%5E
(	%28
)	%29
\|	%7C
\	%5C
{	%7B
[	%5B
}	%7D
]	%5D
"	%22
<	%3C
,	%2C
>	%3E

Symbol	URL-Encoded
~	%7E
`	%60
!	%21
^	%5E
(	%28
)	%29
\|	%7C
\	%5C
{	%7B
[	%5B
}	%7D
]	%5D
"	%22
<	%3C
,	%2C
>	%3E

Destination-Code - Chetan Crasta's XHTML, HTML and CSS Notes

The img Element

Attributes

Inline Frames

Attributes

The i Element

Attributes

The html Element

Attributes

The hr Element

Attributes

The head Element

Attributes

The h1, h2, h3, h4, h5 and h6 Elements

Attributes

The frameset, frame, and noframes Elements

The frameset Element

Attrbutes

The frame Element

Attrbutes

The noframes Element

Nesting Framesets

Problems with frames

The form Element

Attributes

Special Targets

The font Element

Attributes

The fieldset and legend Elements

Internet Explorer Conditional Comments

The `frameset` Element

The `frame` Element

The `noframes` Element

Symbol	URL-Encoded
~	%7E
`	%60
!	%21
^	%5E
(	%28
)	%29
\|	%7C
\	%5C
{	%7B
[	%5B
}	%7D
]	%5D
"	%22
<	%3C
,	%2C
>	%3E