The <applet> element

The applet element is used to place a Java applet in a web page. This element is deprecated and has been replaced by the object element.

(X)HTML Core Attributes - dir, class, id, lang, xml:lang, style and title

There are a few attributes that are considered "core attributes" because they can be applied to nearly every element. They are:

dir

It can take the values rtl or ltr which stand for right-to-left and left-to-right. This attribute specifies base direction of directionally neutral text (i.e., text that doesn't have inherent directionality as defined in Unicode). It also specifies the directionality of tables. Source: W3C.

Example: <p dir="rtl">The quick brown fox</p> In this example, the text is aligned to the right in the same way that text-align:right would. This attribute is inherited by child elements.

This attribute can be applied to all elements except applet, base, basefont, bdo, br, frame, frameset, iframe, param, script.

class

A class is a name under which multiple (X)HTML elements can be grouped for the purpose of styling using CSS or scripting using Javascript. A single element can be associated with multiple classes, each class name being separated by spaces.

Example: <p class="products floated">the quick brown fox jumps</p>

In the above example, the p belongs to two classes: products and floated.

The class attribute can be applied to all elements except base, basefont, head, html, meta, param, script, style, title.

id

An id is a name assigned to a single element in an (X)HTML document for the purpose of styling using CSS and scripting using Javascript and it is also used for creating fragments. An element can have only one id. No two elements should have the same id value.

Example: <p id="tagline">the quick brown fox</p>

The id attribute can be applied to all elements except base, head, html, meta, script, style, title.

lang

The lang attribute identifies the language (human languages, not computer languages) of the text content and attribute values of an element. The language is specified using a two-letter code specified in ISO 639-1. The lang attribute helps screen readers to pronounce words correctly, helps browsers to choose the correct fonts and the punctuation such as correct quotation marks, and helps search engines to identify the language of a web page.

Example: <p>The French word for apple is <span lang="fr">pomme</span>.</p>

This attribute can be applied to any element except applet, base, basefont, br, frame, frameset, iframe, param, script.

This attribute is inherited by child elements. The lang attribute is often applied to the html element to specify the language of the document.

xml:lang

This attribute is similar to the lang attribute, but is used only in XHTML documents.

Example: <p xml:lang="fr">Bonjour! Comment allez-vous?</p>

style

The style attribute is used to apply CSS a rule to an element. The value of the style attribute is one or more CSS declarations separated by semicolons and, optionally, spaces. Curly brace limiters ({ and }) are not allowed. It cannot contain CSS selectors.

The CSS declarations in the style attribute have the highest specificity and are known as inline styles.

Example: <p style="background-color:navajowhite;color:indianred">the quick brown fox</p>

The style attribute can be applied to all elements except base, basefont, head, html, meta, param, script, style, title.

title

The title attribute contains additional information about an element. If the element is displayed, browsers display the value of the title attribute as a tool tip when the mouse hovers over it.

Example: <p><img src="photo1.jpg" alt="Photo of the Himalayas"></p>

The title attribute can be applied to all elements except base, basefont, head, html, meta, param, script, title.

The a Element

The <a> element defines an anchor. It is used for two purposes: to create a hyperlink and to create a fragment. A hyperlink is a clickable area that when clicked, will take the user to another document or to a particular element in the same document.

The <a> element is an inline element, therefore it must have a block element as an ancestor. It can contain text or child inline elements. Therefore, text, images, inline elements, and line breaks can be made hyperlinks. The href attribute of the <a> element contains the destination of the hyperlink. The destination can be another webpage or file, or it can be a fragment in the same or a different page.

Below is an example of a hyperlink to an HTML document.

Example 1: <a href="about.html">About Us</a>

Below is an example of an image hyperlink.

Example 2: <a href="large.jpg"><img src="small.jpg" alt="an image"></a>

A fragment is an element in a document that has been labelled using the name or the id attribute.

The W3C HTML 4.01 specification for links states "Destination anchors in HTML documents may be specified either by the a element (naming it with the name attribute), or by any other element (naming with the id attribute)". The name and id specification for XHTML 1.0 states "XHTML 1.0 documents MUST use the id attribute when defining fragment identifiers".

Therefore, the name attribute should never be used in XHTML 1.0 documents (except in form control elements where they are allowed). In HTML 4.01 documents, either the name or the id attribute can be used to specify fragments. To conclude, it is best to use only the id attribute irrespective of document type (HTML or XHTML).

Example 3: <p name="product_1">The five boxing wizards jump quickly.</p>

Example 4: <p id="product_1">The five boxing wizards jump quickly.</p>

The first example shows a fragment in an HTML 4.01 document. The second example shows the same fragment in an XHTML 1.0 or HTML 4.01 document, created using the id attribute. In both cases, the fragment can be referenced from within the same document by a hyperlink as shown in the example below.

Example 5: <a href="#product_1">Go to Product 1</a>

The fragment shown in Example 3 and Example 4 can be accessed from another document by including the filename followed by the hash symbol and fragment name, as shown below.

Example 6: <a href="products.html#product_1">Go to Product 1</a>

The id value must begin with a letter and can contain numbers, hyphens, underscores, colons and periods. An id must be unique in a page.

The a element can have one title attribute that specifies a description of the hyperlink. It is displayed as a tooltip when the mouse moves over the link.

Transitional DTD's allow the a tag to have the target attribute. With this attribute, you can specify the name of the window in which the link should open.

Example 7: <a href="news.html" title="news.html" target="stuff">

This will cause news.html to open in a new window. This window will have the internal name "stuff". If a window with the internal name "stuff" is already open, then news.html will open in it.

The target attribute is also useful in frame documents. Using this attribute links in one frame can open in another.

Special Targets

There are four special target values - _blank , _self , _parent and _top .

_blank

This target causes the linked document to always open in a new window. The new window will not have an internal name.

_self

This target causes the linked document to always load in the same window or frame as the link. This is the default behavior of links. This target value is useful to override the target specified in the base tag of the document. _parent

This causes the linked document to open in the parent of the document that contains the link. This is useful when using iframes. The document in the iframe can have links that when clicked, cause the linked document to open in the entire window rather than in the frame.

_top

This causes the linked document to open in the topmost frame in the hierarchy. In a framed document, it is useful to include this attribute in all links that lead to other websites. This prevents outside websites from loading within the same frameset.

(X)HTML Minimum Document Structure

Every (X)HTML document must have a Document Type Declaration, html as the root element, head and body as the child elements, and title as the child element of head. In XHTML documents, the html element must have the attribute xmlns and xml:lang and lang.

Example 1: <!DOCTYPE HTML "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>some title</title>
</head>
<body>
body content
</body>
</html>

Example 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>some title</title>
</head>
<body>
body content
</body>
</html>

The lang attribute's value specifies the language of the content of the body tag. This attribute can also be used on other elements. The xml:lang attribute has the same function as lang, but it is used only in XHTML documents. The value of these attributes is a two-letter code specified in ISO 639-1 .

A webpage can also include a meta tag that specifies the character encoding of the page.

Example: <meta http-equiv="content-type" content="text/html; charset=utf-8">

The http-equiv attribute is used by HTTP servers to gather information for HTTP response headers. Therefore, in the above example, the HTTP response header will have content-type: text/html; charset=utf-8

The example below includes a meta tag that specifies the HTTP response header.

Example 3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><i>some title</i></title>
</head>
<body>
<i>body content</i>
</body>
</html>

Document Type Declaration

A Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML (HTML) or XML (XHTML) document with a Document Type Definition (DTD). (Source Wikipedia)

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

The general syntax of Document Type Declaration of (X)HTML documents is: <!DOCTYPE root-element [SYSTEM OR PUBLIC FPI] "uri">

In web pages the root element is always html. The keywords SYSTEM or PUBLIC indicate whether the DTD is stored in a private computer or a public one. If public, then the keyword is followed by a Formal Public Identifier (FPI). An FPI is a specially formatted string of text that uniquely identifies the DTD. If the SYSTEM keyword is chosen, an FPI is not necessary. The FPI in the above example is "//W3C//DTD HTML 4.01//EN". And the last item found in (X)HTML Document Type Declarations is the URI of the DTD. In the above example, it is "http://www.w3.org/TR/html4/strict.dtd"

A Document Type Definition (DTD) is a set of markup declarations that define a document type for SGML-family markup languages (SGML, XML, HTML). Source: Wikipedia)

A DTD defines what elements are in the document, the attributes the elements can have, the contents of the elements etc.

These are the current Document Type Declarations used in (X)HTML pages:

HTML 4.01 Declarations

HTML 4.01 Strict

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

HTML 4.01 Transitional

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

HTML 4.01 Frameset

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

XHTML 1.0 Declarations

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

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

HTML 5

<!DOCTYPE HTML>

The root element (HTML) in the declaration can be lower case or upper case for HTML 4.01.

Definition of HTML, XHTML and CSS

HTML stands for HyperText Markup Language. It is a language that provides a semantic description (meaning) for the content of a document. It also specifies a structure for the document in the form of a hierarchy of elements.

Hypertext is text displayed on a computer or other electronic device with references (hyperlinks) to other text that the reader can immediately access, usually by a mouse click or keypress sequence. (Source: Wikipedia)

A markup language is a modern system for annotating a text in a way that is syntactically distinguishable from that text. (Source: Wikipedia)

XHTML stands for Extensible HyperText Markup Language. It is "a reformulation of the three HTML 4 document types as applications of XML 1.0". (Source: W3C)

XHTML provides the following benefits:

• Extensiblity: The language allows for future growth
• Interoperablity: XHTML documents can be transformed for constrained devices such as mobile phones
• Namespaces: Fragments from other XML-based languages could be included by specifying the namespace using the xmlns attribute.
• Modularization: HTML could be divided into reusable components.

CSS stands for Cascading Style Sheets.

CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of HTML and XHTML pages. A style sheet language is a computer language used to describe the presentation of structured documents. (source: Wikipedia)