XHTML Tutorial

XHTML TutorialXHTML is the next generation of HTML and is a hybrid between HTML and XML.

XML was designed to describe data. HTML was designed to display data.

XHTML is much stricter than HTML. Not all browers support XML so XHTML provides an intermediary soluton and can be interpreted by XML and HTML browsers.

Start learning now!

What is an XHTML File? XHTML stands for EXtensible HyperText Markup Language XHTML is similar to HTML,The only difference is XHTML is

stricter and cleaner version of HTML An XHTML file contains small mark up tags The way how the page must be displayed in the browser is

described by these markup tags An XHTML file must have an .xhtml file extension

Using any simple text editor XHTML file can be created

File extension: .xhtml MIME type: application/xhtml+xml Type code: TEXT Developed by: W3C Type of format: markup language

Standard(s): XHTML 1.0, XHTML-MP 1.0

Working with XHTML

http://www.academictutorials.com/xhtml/xhtml-introduction.asp

XHTML stands for eXtensible HyperText Markup Language which is simply HTML 4.0 ,written as an XML application, and it makes manipulating HTML possible in the same way as you would work with XML.

Way from HTML to XHTML-MP 1.0 HTML 4 -> XHTML 1.0 -> XHTML Basic -> XHTML Mobile Profile As the world was going crazy about XML, Most popular mark-up also could not escape its destiny: XHTML 1.0 is just a reformulation of HTML 4 in XML. HTML 4 simply has to follow few syntatic rules to be XHTML 1.0

All tags should be written using small letters

All tags needs to be closed either like this way(<b>bold text</b>) or need to be closed like (<br> /).Here Single line breaks (<br>) are not entertained and are not synctactically correct

All documents should have a document type defination All documents should be properly formed Shortning of Attributes is not allowed

There must be a proper nesting of tags

How GOOD and how BAD is XHTML? The two main uses are "extensibility and portability" and it is standard too .

Extensibility:As XHTML is extesible, We can create and add on our own tags

Portability: All new tags that are created and added are understood by all.

Standardization: Unlike HTML, XHTML follows certain standards to make a true template. And all that has to be accepted and what not should be accepted is followed in that template

On the other side of the coin,there are couple of problems

XHTML is not as easy as HTML to play in just a day. HTML is like a toy that everyone can play with.But people may loose interest to play with such rigid rules of XHTML. Still we cap play with HTML as we used to do before.The XHTML DTD contains HTML. Only thing is you should use an HTML declaration statement at the top of the document.

For that reason XHTML, and XML go against the rules which were laid down by W3C for the purpose of web content and authoring tools accessible to disabled users.

Why XHTML?

Whats is wrong with HTML?

HTML is the set of codes (i'e "markup language") that a writer puts into a document to make the page displayable on the World Wide Web. HTML (HyperText Markup Language) has been the lingua franca of the World Wide Web since 1990. It has gone through several revisions, and now it is at version 4. Although it has been enormously successful, the language is no longer suitable for the deployment of commercial and industrial web-based applications on the Internet and intranets.

HTML will not go through another revision, except as an application of XML, i.e. XHTML. HTML is enormously successful and we fully expect XHTML to be of great interest to web developers now that it's a W3C Recommendation.

There won't be any 'HTML 5'. Why it should not be? Well, bear in mind that HTML was originally designed for different purpose than today's very demanding hi-tech Internet - namely, to exchange data and documents between scientists associated with CERN, the birthplace of the web. Since then the language has been hacked and stretched into an unwieldy monster, and the prevalence of sloppy markup practices makes it hard or impossible for some user agents (such as browsers, spiders, etc) to make sense of the web. After a decade of use and ad-hoc evolution, there is a strong need for a more extensible and more portable language.

http://www.academictutorials.com/xhtml/xhtml-why.asp


The role of XML XML (Extensible Markup Language) is structured set of rules for how to define any kind of data that has to be shared on the Web. It's called "extensible" because anyone can invent a particular set of markup for a particular purpose and as long as everyone uses it,can be adopted and used for different purposes - including, as it happens, describing the appearance of a Web page.

However, the immediate issue is to facilitate transition from HTML for the mass of developers who are already familiar with HTML. That being the case, it seemed desirable to reframe HTML in the terms of XML. The result is XHTML, which is a particular application of XML for "expressing" Web pages.

XHTML is the follow-on version of HTML 4. You could think it as HTML 5, except that it is called XHTML 1.0. In XHTML, all HTML 4 markup tags and attributes will continue to be supported.

With HTML, authors had a fixed set of elements to use, with no variation. Unlike HTML, however, XHTML can be extended by anyone who uses it. New tags and attributes can be defined and also added to those that are already existing, making possible new ways possible to embed content and programming in Web page. XHTML 1.0, allow authors to mix and match the known elements of HTML 4 elements with that of other XML languages elements. languages, including the one which are developed by W3C for multimedia.

We combine HTML with other tag sets to meet the desires to extend the functionality of the web. (Synchronized Multimedia Integration Language - SMIL), mathematical expressions (MathML), two dimensional vector graphics (Scalable Vector Graphics - SVG), and metadata (Resource Description Framework - RDF).

Why should we go for XHTML The reasons to upgrade language to a new version is to take advantage of new bells and whistles, and also because problems with the earlier version have been fixed. However, XHTML is just a faithful copy of HTML 4, as tag functionalities go, so here we cant expect any fancy new tags.

According to W3C XHTML should be used because of:

Extensibility

XML documents needs to be well-formed. Under HTML (an




SGML application), any addition of a new group of elements requires to alter the entire DTD. In an XML-based DTD, all that is required is that the new set of elements be internally consistent and well-formed to be added to an existing DTD. This makes the development and integration of new collections of elements very easy.

Portability

Now days use of non-desktop devices to access Internet documents is increasing .75% of Internet access could is carried out on these alternate platforms. most of these non-desktop devices will not have the computing power of a desktop computer, they are not designed to hold ill-formed HTML as current browsers tend to do.These non-desktop browsers will not display the document if they wont receive well-formed markup (HTML or XHTML).

While HTML isn't completely lacking those attributes, we're all too familiar with how painfully slow the evolution has been (relative to the pace of Internet development), and how hard it it is to make your pages work on a wide range of browsers and platforms. XHTML will help to remedy those problems.

Differences Between XHTML And HTML

What makes XHTML different from HTML Tag and attribute names must be in lower-case Elements must be nested properly, no overlapping Non-empty elements must be closed Empty elements must be terminated All attribute values must be quoted Attribute value pairs cannot be shortened

<script> and <style> elements

Tag and attribute names must be in lower-case

XHTML element and attribute names must be written in lowercase,as XML is case-sensitive, No longer you can get away with what people did to improve readability of the code— typing the attributes and elements names in uppercase and the values in lowercase. Attribute values can be any case you want. For example, the "#ffcc33" value below can also be written as "#FFCC33."



HTML XHTML<TD BGCOLOR="#ffcc33"> <td bgcolor="#ffcc33">

Elements must be nest properly, no overlapping Browsers wont care overlaped elements in most case. For example, if there is bold tag at the end of a paragraph, it doesnot matters whether to close the </b> first or the </p>. But with XML and XHTML, we have to unclose the last opened tag first and then first opened

HTML XHTML<p>Be <b>bold!</p></b> <p>Be <b>bold!</b></p>

Overlapping is widely tolerated in HTML,though it is illegal. An XHTML document must be well-formed XML. It should follow the basic XML syntax. If it fails doing so, There will be no obligation to continue processing of the document bythe XML parser.XML parser will not try to recover and "guess" what you meant if the syntax is wrong as HTML parser did.

Non-empty elements must be closed either Explicitly or Implicitly all elements must be closed. Since the <p> is designed to mark the beginning and end of a paragraph it is a "non-empty" tag .Thus it must be closed at the end of paragraph

HTML XHTMLFirst paragraph<p>

Second paragraph<p> <p>First paragraph</p>

<p>Second paragraph</p>

Affected Elements: <basefont>, <body>, <colgroup>, <dd>, <dt>, <head>, <html>, <li>, <p>, <tbody>/<thead>/<tfoot>, <th>/<td>, <tr>

Empty elements must be terminated There are tags which contains no content within them, when we feel there is no important role to play by them, then should delete those empty tags. <p> tag contains a paragraph, and a <b> tag contains text to be bolded, a <br> tag is "empty" as it never contains any content.Other tags like this are <hr> and <img src="valid.gif">

HTML XHTML

<hr> <hr /> <br> <br /> <input ... > <input ... /> <param ... > <param ... /> <img src="valid.gif">

<img src="valid.gif" />

Affected Elements: <area> <base> <br> <col> <frame><hr><img> <input><isindex><link><meta> <option><param>

All Attribute values must be quoted

No more <img ... border=0>is allowed type.Attribute values including numeric values must be quoted

HTML XHTML<img ... border=0> <img ... border="0" />

Attribute value pairs cannot be minimized

Usually we try to minimize the attribute if it has single value.But XML does not allow attribute minimization.Single valued or stand-alone attributes in XHTML must be expanded (eg. <td nowrap>text </td> becomes <td nowrap="nowrap">text</td>). umeric

HTML XHTML <dl compact> <dl compact="compact"> <ul compact> <ul compact="compact">

<option ... selected> <option ... selected="selected"> >

<td nowrap> text </td>

<td nowrap="nowrap"> text </td>

<input type="radio" ... checked>

<input type="radio" ... checked="checked" />

<input type="checkbox" ... checked>

<input type="checkbox" ... checked="checked" />


The script and style elements in XHTML, are declared as having #PCDATA content. As a result, < and & will be treated as the start of markup, and entities such as < and & will be recognized as entity references by the XML processor to < and & respectively.We can avoid the expansion of these entities by Wrapping the content of the script or style element within a CDATA marked section. The string which ends the CDATA section."]]>" is The only delimiter that is recognized in a CDATA.

XHTML

<script language="JavaScript type="text/javascript"> <![CDATA[ document.write("<b>Hello World!</b>"); ]]> </script>

Affected Elements: <basefont>, <body>, <colgroup>, <dd>, <dt>, <head>, <html>, <li>, <p>, <tbody>/<thead>/<tfoot>, <th>/<td>, <tr> XHTML Syntax Rules

XHTML follows the following syntax Documents in XHTML must always be well-formed

All XHTML Document can have only one root element that is <html>all other elements should be nested within the root element. There will be only one parent called a root element which can have its children(sub elements) nested within it. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is:

(doctype)<html xmlns="http://www.vyom.co.in/xhtml"><head><title>...</title>... </head><body>... </body></html>

Notice the (doctype) and the "xmlns" attribute on the opening html tag. You should also include a character set meta tag in the <head> element.

XHTML elements must be properly nested

Wrong:

<p>This is our site <em>paragraph.</p></em>

Right:

<p>This is our site <em>paragraph.</em></p>

Since XML is case-sensitive. Tag names must be in lowercase.

Wrong:

<PRE>Some preformatted text.</PRE>

Right:

<pre>Some preformatted text.</pre>

All Attributes that are used here must be in lower case

Wrong:

<a HREF="http://www.vyom.co.in">

Right:

<a href="http://www.vyom.co.in">

All elements must be closedThis includes elements that traditionally do not contain any content, such as images, form inputs, meta tags, etc.

Wrong:

<p>Welcome to vyom.<p>This is our website

Right:

<p>Welcome to vyom..</p><p>This is our website.</p>

Elements which dont have closing tags must be closed with slash inside the tag.

<br> becomes <br /><hr> becomes <hr /><input type="text">becomes <input type="text" />

All attributes values must be quoted

Wrong:

<a href=http://www.vyom.co.in>example link</a>

Right:

<a href="http://www.vyom.co.in">example link</a>

Attribute minimization is forbidden

Wrong:

<input type="checkbox" checked />

Right:

<input type="checkbox" checked="checked" />

All image tags should have "alt" attributes.

Wrong:

<img src="kitten.jpg" />

Right:

<img src="kitten.jpg" alt="an evil kitten" />

The "id" attribute and the "name" attribute- Element ids which should be uniqe eventually will replace element names.For now, to ensure backword-compatibility it is recommended to use both,for example, many of the form fields are accessed by their names. In cascading style sheets and various scripting languages Ids are used .

<img src="kitty.jpg" name="kittypic" alt="an evil kitten" />

<img src="kitty.jpg" name="kittypic" alt="an evil kitten" id="kittypic" />

The XHTML DTD defines mandatory elements

XHTML Document Type Definitions.

By referencing the Document Type Definition (DTD), DOCTYPE definition line in an XHTML document specifies the document type .The syntax and legal elements of an XHTML document are specified by DTD. The three types of documents are defined as follows:

Strict

By using this type a strictest rule is applied on the document. There shoulnot be any presentational tags in XHTML. To display the data should use cascading style sheets. The attributes and elements which are not deprecated or do not appear in framesets are included in strict DTD.

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

Transitional

This document type is used when document contains presentational tags. For the browsers which do not support Cascading Style Sheets, This document type seems to be useful. The Transitional DTD includes all that included in the strict DTD and also the deprecated elements and attributes.

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

Frameset

When we make use of frames to split the browser window then this document type can be used. This includes all that which is present in The transitional DTD and also the frames

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

XHTML Elements

XHTML documents are text files made up of XHTML elements.

XHTML elements are defined using XHTML tags.

What Is An XHTML Element

An XHTML element indicates structure in an XHTML document and a way of hierarchically arranging content. XHTML elements have both properties attributes and content, according to the appropriate XHTML DTD as specfied (allowable and required). A variety of structures are represented by elements like headings, hypertext links, paragraphs, lists, embedded media.

XHTML elements can be constructed with:

1) a start tagthat marks the start of an element. 2) it may follow any number of attributes and their corresponding values. 3) it can have some contentin it. (characters and other elements). and 4) finally an end tag comes

Many of XHTML elements hold attributes in the start tags, defining desired behavior or indicating additional element properties. Unlike HTML here there is always a need of end tag. There are some elements which are not subset of any official DTDs, but still are supported by some browsers and are also used in some web pages. All such elements may be ignored or displayed improperly on browsers which do not support them.

XHTML Tags

Sometimes XHTML elements are referred to as "tags". though many prefer "tag" strictly to the semantic structures to delimit the start and end of an element.

XHTML tags are used to mark-up XHTML elements In XHTML the tags are always surrounded by < and > These characters are called angle brackets XHTML tags always come in pairs like <b> and </b> The first tag is called the start tag, and the second tag

is the end tag The text that lies between the start and the end tags is

called element content XHTML tags are case sensitive,

WE should start using lowercase tags if we have to prepare ourself for the next generations of HTML, XHTML which is next generation HTML demands for lowercase tags

XHTML Tag List

Sometimes XHTML elements are referred to as "tags", though many prefer the term tag strictly in reference to the semantic structures delimiting the start and end of an element.

XHTML tags are used to mark-up XHTML elements Tags in XHTML are always surrounded by characters <

and > These characters are called angel brackets All tags in XHTML come in pairs for example <b> and

</b> In these pair of tags,the first tag is the start tag,and the

second tag is called end tag The text that lies between the start tag and the end tag

is called the element content XHTML tags are case sensitive,

DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset

Tag Description DTD Defines a comment STF<!DOCTYPE> Defines the document type STF<a> Defines an anchor STF<abbr> Defines an abbreviation STF<acronym> Defines an acronym STF

<address> Defines an address element STF<applet> Deprecated. Defines an applet TF<area> Defines an area inside an image map STF<b> Defines bold text STF<base> Defines a base URL for all the links in a page STF<basefont> Deprecated. Defines a base font TF<bdo> Defines the direction of text display STF<big> Defines big text STF<blockquote> Defines a long quotation STF<body> Defines the body element STF<br> Inserts a single line break STF<button> Defines a push button STF<caption> Defines a table caption STF<center> Deprecated. Defines centered text TF<cite> Defines a citation STF<code> Defines computer code text STF<col> Defines attributes for table columns STF<colgroup> Defines groups of table columns STF<dd> Defines a definition description STF<del> Defines deleted text STF<dir> Deprecated. Defines a directory list TF<div> Defines a section in a document STF<dfn> Defines a definition term STF<dl> Defines a definition list STF<dt> Defines a definition term STF<em> Defines emphasized text STF<fieldset> Defines a fieldset STF<font> Deprecated. Defines text font, size, and

colorTF

<form> Defines a form STF

http://www.academictutorials.com/xhtml/xhtml-taglist.asp


<frame> Defines a sub window (a frame) F<frameset> Defines a set of frames F<h1> to <h6> Defines header 1 to header 6 STF<head> Defines information about the document STF<hr> Defines a horizontal rule STF<html> Defines an html document STF<i> Defines italic text STF<iframe> Defines an inline sub window (frame) TF<img> Defines an image STF<input> Defines an input field STF<ins> Defines inserted text STF<isindex> Deprecated. Defines a single-line input field TF<kbd> Defines keyboard text STF<label> Defines a label for a form control STF<legend> Defines a title in a fieldset STF<li> Defines a list item STF<link> Defines a resource reference STF<map> Defines an image map STF<menu> Deprecated. Defines a menu list TF<meta> Defines meta information STF<noframes> Defines a noframe section TF<noscript> Defines a noscript section STF<object> Defines an embedded object STF<ol> Defines an ordered list STF<optgroup> Defines an option group STF<option> Defines an option in a drop-down list STF<p> Defines a paragraph STF<param> Defines a parameter for an object STF<pre> Defines preformatted text STF<q> Defines a short quotation STF




<s> Deprecated. Defines strikethrough text TF<samp> Defines sample computer code STF<script> Defines a script STF<select> Defines a selectable list STF<small> Defines small text STF<span> Defines a section in a document STF<strike> Deprecated. Defines strikethrough text TF<strong> Defines strong text STF<style> Defines a style definition STF<sub> Defines subscripted text STF<sup> Defines superscripted text STF<table> Defines a table STF<tbody> Defines a table body STF<td> Defines a table cell STF<textarea> Defines a text area STF<tfoot> Defines a table footer STF<th> Defines a table header STF<thead> Defines a table header STF<title> Defines the document title STF<tr> Defines a table row STF<tt> Defines teletype text STF<u> Deprecated. Defines underlined text TF<ul> Defines an unordered list STF<var> Defines a variable STF<xmp> Deprecated. Defines preformatted text

XHTML Standard Attributes

Just adding text limits the the way of creating web pages. Tags have attributes and they also accept style rules which modify their functions, this gives XHTML it utility.

The rules of XML and rules for general attributes should be kept in mind while using attributes.

The rules are as follows:

At the opening of the element tag only the attribute must be specified. closing tag of an element merely contains a back slash and tag name.

All attribute names must be in lower case. All attributes must have a value. All attribute should hold a values and always be double

quotes. Here double quote and two single quotes are not the same.

All attributes must be placed in a list seperated by blank space and no other characters must be included between them

Attributes are divided into categories, among thes some of them overlap. These can be grouped as follows:

Universal/Core Attributes

Including the <body> tags, almost all tags that come in the body are held under this category. These are informational, or they associate the element with information which is elsewhere in the document.

Events

Based on the user actions or browser these are used to invoke scripts. For example using onmouseover attribute to create rollover effects in a document. They are used in JavaScript extensively,

Presentational or Styling Attributes

Presentational or Styling attributes are the attributes that are used to change the way in which an element is to be displayed on the screen. They are deprecated into style sheets, To code for backward compatibility we should know them well.

Tag-Specific Attributes

Attributes which are concerned to a given tag or group of tags are called Tag-specific attributes. Certain tags like <img> tag, does not hold any meaning without attributes. Therefore we do discuss these attributes in relation to the tags they apply to.

XHTML Color Names

Colors can be defined using color names.

XHTML Color Names The table below provides a list of color names.

XHTML Validation

With DTD how to Validate XHTML

An XHTML document is validated against a Document Type Definition (DTD). A proper DTD must be added as the first line of the file,before validating properly an XHTML file.

The Strict DTD includes all non-deprecated elements and attributes or those which donot appear in framesets:

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

The Transitional DTDcontains everything which the strict DTD includes plus deprecated elements and attributes:

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

The Frameset DTD includes frames and all the other things which are included in transitional DTD:

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

This is a simple XHTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html> <head> <title>simple document</title> </head> <body> <p>a simple paragraph</p> </body> </html>

XHTML Modularization Model

To develop any complex type of application it is very important to follow a clear conceptual standard for organizing the development. To reduce the application's functionality into some number of "building blocks" or "modules"we can use the Modular approach. Then some specific rules are followed to combine these modules to form an entire application. This approach is very easy and is more advantageous than any other approaches

Why Modularization is required?

Conceptual clarity Ideas and code can be shared between developers due to the Conceptual clarity

Reduces complexity Since the application functionality is divided into modules it reduces the complexity

Supports object-oriented design principles Since it follows concept of Encapsulation and data hiding it supports object oriented design principles

Encourages reuse If the modules are well defined they can be reused in future applications.

Decreases debugging time By design changes we can localize errors and thus the debugging time can be reduced

Increases flexibility and maintainability Since each modules can be upgraded or replaced independently of others we can increase flexibility and maintainability

Eases development, testing, and maintenance As it provides logical,easy to understand, and consistent organization it eases development,testing and maintenance.

Allows the creation of generic rules, methods, and

procedures To help in consistent development practices it allows creation of generic rules, methods, and procedures

Creates configurable objects As the objects are cofigurablethat it helps the end user to tailor them for different purposes

Supports a variety of end user interface and deployment environments It supports all sorts of interfaces of the end users and deployment environments as it follows standardized subsets and supersets.

Design Goals Here are the design goals for modularization framework for XHTML:

To create coherent sets of semantically related modules within the XHTML namespace using XML Schema

To support the creation of subsets and supersets of XHTML for specific purposes such as handheld devices and special-purpose appliances

To facilitate future development by allowing modules to be upgraded or replaced independently of other modules

To encourage and facilitate the reuse of common modules by developers.

XHTML 7-BIT ASCII Reference

While transmitting data over the Web, XHTML uses standard 7-BIT ASCII.

128 different character values are represented using 7-BIT ASCII (0-127).

Printable 7-BIT ASCII Characters

Result Description Entity Number space ! exclamation mark !" quotation mark "

# number sign #$ dollar sign $% percent sign %& ampersand &' apostrophe '( left parenthesis () right parenthesis )* asterisk *+ plus sign +, comma ,- hyphen -. period ./ slash /0 digit 0 01 digit 1 12 digit 2 23 digit 3 34 digit 4 45 digit 5 56 digit 6 67 digit 7 78 digit 8 89 digit 9 9: colon :; semicolon ;< less-than <= equals-to => greater-than >? question mark ?@ at sign @

A uppercase A AB uppercase B BC uppercase C CD uppercase D DE uppercase E EF uppercase F FG uppercase G GH uppercase H HI uppercase I IJ uppercase J JK uppercase K KL uppercase L LM uppercase M MN uppercase N NO uppercase O OP uppercase P PQ uppercase Q QR uppercase R RS uppercase S ST uppercase T TU uppercase U UV uppercase V VW uppercase W WX uppercase X XY uppercase Y YZ uppercase Z Z[ left square bracket [\ backslash \] right square bracket ]^ caret ^

_ underscore _` grave accent `a lowercase a ab lowercase b bc lowercase c cd lowercase d de lowercase e ef lowercase f fg lowercase g gh lowercase h hi lowercase i ij lowercase j jk lowercase k kl lowercase l lm lowercase m mn lowercase n no lowercase o op lowercase p pq lowercase q qr lowercase r rs lowercase s st lowercase t tu lowercase u uv lowercase v vw lowercase w wx lowercase x xy lowercase y yz lowercase z z{ left curly brace {| vertical bar |

} right curly brace }~ tilde ~

7-BIT ASCII Device Control CharactersThere is nothing to do by these characters inside an XHTML document. They were designed to control hardware parts like printers and tape drives.

Result Description Entity NumberNUL null character SOH start of header STX start of text ETX end of text EOT end of transmission ENQ enquiry ACK acknowledge BEL bell (ring) BS backspace HT horizontal tab LF line feed
VT vertical tab FF form feed CR carriage return SO shift out SI shift in DLE data link escape DC1 device control 1 DC2 device control 2 DC3 device control 3 DC4 device control 4 NAK negative acknowledge

SYN synchronize ETB end transmission block CAN cancel EM end of medium SUB substitute ESC escape FS file separator GS group separator RS record separator US unit separator DEL delete (rubout)

XHTML Entities Reference

Characters like the < have a special meaning in HTML, So these cannot be used in the text.

An entity is a term used for symbol. Many symbols such as foreign cash symbols, trademark, or copyright exist outside of the ones on your keyboard. In order to display them, you need to know 4 parts.

In XHTML tags are created using less than and greater than symbol. We need entities to use them on our web-sites

A Character Entity has three parts:

Each entity starts with ampersand - &

An entity name or a # and an entity number

And finally a semicolon - ;

The ISO 8859-1 character set is supported by HTML 4.01.

The original 7-BIT ASCII standard is the lower part of ISO-8859-1 (codes from 0-127). Without a character reference, many of these characters can be used .

Using character entity names we can use all the codes from 160-255 (higher part of ISO-8859-1)

Note that the entity names are case sensitive.

ASCII Entities with new Entity Names

Result Description Entity Name Entity Number

" quotation mark " "

' apostrophe ' (does not work in IE) '

& ampersand & &< less-than < <> greater-than > >

Result Description Entity Name Entity Number non-breaking space

¡ inverted exclamation mark ¡ ¡

¤ currency ¤ ¤¢ cent ¢ ¢£ pound £ £¥ yen ¥ ¥¦ broken vertical bar ¦ ¦§ section § §¨ spacing diaeresis ¨ ¨© copyright © ©ª feminine ordinal indicator ª ª« angle quotation mark « «

(left)¬ negation ¬ ¬

soft hyphen ® registered trademark ® ®™ trademark ™ ™¯ spacing macron ¯ ¯° degree ° °± plus-or-minus ± ±² superscript 2 ² ²³ superscript 3 ³ ³´ spacing acute ´ ´µ micro µ µ¶ paragraph ¶ ¶· middle dot · ·¸ spacing cedilla ¸ ¸¹ superscript 1 ¹ ¹

º masculine ordinal indicator º º

» angle quotation mark (right) » »

¼ fraction 1/4 ¼ ¼½ fraction 1/2 ½ ½¾ fraction 3/4 ¾ ¾¿ inverted question mark ¿ ¿× multiplication × ×÷ division ÷ ÷

ISO 8859-1 Character Entities

Result Description Entity Name Entity Number

À capital a, grave accent À ÀÁ capital a, acute accent Á Á

Â capital a, circumflex accent Â Â

Ã capital a, tilde Ã ÃÄ capital a, umlaut mark Ä ÄÅ capital a, ring Å ÅÆ capital ae Æ ÆÇ capital c, cedilla Ç ÇÈ capital e, grave accent È ÈÉ capital e, acute accent É É

Ê capital e, circumflex accent Ê Ê

Ë capital e, umlaut mark Ë ËÌ capital i, grave accent Ì ÌÍ capital i, acute accent Í Í

Î capital i, circumflex accent Î Î

Ï capital i, umlaut mark Ï ÏÐ capital eth, Icelandic Ð ÐÑ capital n, tilde Ñ ÑÒ capital o, grave accent Ò ÒÓ capital o, acute accent Ó Ó

Ô capital o, circumflex accent Ô Ô

Õ capital o, tilde Õ ÕÖ capital o, umlaut mark Ö ÖØ capital o, slash Ø ØÙ capital u, grave accent Ù ÙÚ capital u, acute accent Ú Ú

Û capital u, circumflex accent Û Û

Ü capital u, umlaut mark Ü ÜÝ capital y, acute accent Ý ÝÞ capital THORN, Icelandic Þ Þß small sharp s, German ß ßà small a, grave accent à àá small a, acute accent á á

â small a, circumflex accent â â

ã small a, tilde ã ãä small a, umlaut mark ä äå small a, ring å åæ small ae æ æç small c, cedilla ç çè small e, grave accent è èé small e, acute accent é é

ê small e, circumflex accent ê ê

ë small e, umlaut mark ë ëì small i, grave accent ì ìí small i, acute accent í í

î small i, circumflex accent î î

ï small i, umlaut mark ï ïð small eth, Icelandic ð ðñ small n, tilde ñ ñò small o, grave accent ò òó small o, acute accent ó ó

ô small o, circumflex accent ô ô

õ small o, tilde õ õö small o, umlaut mark ö ö

ø small o, slash ø øù small u, grave accent ù ùú small u, acute accent ú ú

û small u, circumflex accent û û

ü small u, umlaut mark ü üý small y, acute accent ý ýþ small thorn, Icelandic þ þÿ small y, umlaut mark ÿ ÿ

Some Other Entities supported by HTML

Result Description Entity

NameEntity Number

Œ capital ligature OE &OElig; Œœ small ligature oe &oelig; œŠ capital S with caron &Scaron; Šš small S with caron &scaron; šŸ capital Y with diaeres &Yuml; Ÿ

ˆ modifier letter circumflex accent &circ; ˆ

˜ small tilde &tilde; ˜ en space &ensp; em space &emsp; thin space ‌ zero width non-joiner &zwnj; ‌‌ zero width joiner &zwj; ‍

left-to-right mark &lrm; ‎right-to-left mark &rlm; ‏

– en dash – –

— em dash — —‘ left single quotation mark ‘ ‘’ right single quotation mark ’ ’‚ single low-9 quotation mark &sbquo; ‚“ left double quotation mark “ “” right double quotation mark ” ”„ double low-9 quotation mark &bdquo; „† dagger &dagger; †‡ double dagger &Dagger; ‡… horizontal ellipsis … …‰ per mille &permil; ‰

‹ single left-pointing angle quotation &lsaquo; ‹

› single right-pointing angle quotation &rsaquo; ›

€ euro

XHTML URL-Encoding Reference

The non-standard characters and letters in browsers and plug-ins can be displayed using Hexadecimal values.

Here is a list of The ASCII characters reference in URL-encoding form (hexadecimal format)

URL-encoding from %00 to %8f

ASCII Value

URL-encode

ASCII Value

URL-encode

ASCII Value

URL-encode

æ %00 0 %30 ` %60 %01 1 %31 a %61 %02 2 %32 b %62 %03 3 %33 c %63

%04 4 %34 d %64 %05 5 %35 e %65 %06 6 %36 f %66 %07 7 %37 g %67backspace %08 8 %38 h %68

tab %09 9 %39 i %69linefeed %0a : %3a j %6a %0b ; %3b k %6b %0c < %3c l %6cc return %0d = %3d m %6d %0e > %3e n %6e %0f ? %3f o %6f %10 @ %40 p %70 %11 A %41 q %71 %12 B %42 r %72 %13 C %43 s %73 %14 D %44 t %74 %15 E %45 u %75 %16 F %46 v %76 %17 G %47 w %77 %18 H %48 x %78 %19 I %49 y %79 %1a J %4a z %7a %1b K %4b { %7b %1c L %4c | %7c %1d M %4d } %7d %1e N %4e ~ %7e %1f O %4f %7fspace %20 P %50 € %80

! %21 Q %51 %81" %22 R %52 ‚ %82# %23 S %53 ƒ %83$ %24 T %54 „ %84% %25 U %55 … %85& %26 V %56 † %86' %27 W %57 ‡ %87( %28 X %58 ˆ %88) %29 Y %59 ‰ %89* %2a Z %5a Š %8a+ %2b [ %5b ‹ %8b, %2c \ %5c Œ %8c- %2d ] %5d %8d. %2e ^ %5e Ž %8e/ %2f _ %5f %8f

URL-encoding from %90 to %ff

ASCII Value

URL-encode

ASCII Value

URL-encode

ASCII Value

URL-encode

%90 À %c0 ð %f0‘ %91 Á %c1 ñ %f1’ %92 Â %c2 ò %f2“ %93 Ã %c3 ó %f3” %94 Ä %c4 ô %f4• %95 Å %c5 õ %f5– %96 Æ %c6 ö %f6— %97 Ç %c7 ÷ %f7˜ %98 È %c8 ø %f8

™ %99 É %c9 ù %f9š %9a Ê %ca ú %fa› %9b Ë %cb û %fbœ %9c Ì %cc ü %fc %9d Í %cd ý %fdž %9e Î %ce þ %feŸ %9f Ï %cf ÿ %ff %a0 Ð %d0 ¡ %a1 Ñ %d1 ¢ %a2 Ò %d2 £ %a3 Ó %d3 %a4 Ô %d4 ¥ %a5 Õ %d5 | %a6 Ö %d6 § %a7 %d7 ¨ %a8 Ø %d8 © %a9 Ù %d9 ª %aa Ú %da « %ab Û %db ¬ %ac Ü %dc ¯ %ad Ý %dd ® %ae Þ %de ¯ %af ß %df ° %b0 à %e0 ± %b1 á %e1 ² %b2 â %e2 ³ %b3 ã %e3 ´ %b4 ä %e4 µ %b5 å %e5 ¶ %b6 æ %e6

· %b7 ç %e7 ¸ %b8 è %e8 ¹ %b9 é %e9 º %ba ê %ea » %bb ë %eb ¼ %bc ì %ec ½ %bd í %ed ¾ %be î %ee ¿ %bf ï %ef

XHTML HTTP Status Messages

When a request is made by the browser to web server, an error might occur.

HTTP status messages which can be returned is listed below:

1xx: Information

Message: Description:100 Continue Only small some part of the request is

recieved by the server. Client can continue with the request until the request has not been rejected

101 Switching Protocols The server switches protocol

2xx: Successful

Message: Description:200 OK The request is OK201 Created The request is complete, and a new

resource is created

http://www.academictutorials.com/xhtml/xhtml-http-messages.asp

202 Accepted A request is taken for processing, but processing is no completed

203 Non-authoritative Information

204 No Content 205 Reset Content 206 Partial Content

3xx: Redirection

Message: Description:300 Multiple Choices A link list. An user can select a link and

go to that location. At the Maximum of five addresses

301 Moved Permanently The requested page has moved to a new url

302 Found The requested page has moved temporarily to a new url

303 See Other The requested page can be found under a different url

304 Not Modified 305 Use Proxy 306 Unused This code was used in a previous

version. It is no longer used, but the code is reserved

307 Temporary Redirect The requested page has moved temporarily to a new url

4xx: Client Error

Message: Description:400 Bad Request The server did not understand the

request401 Unauthorized The requested page needs a username



and a password402 Payment Required You can not use this code yet

403 ForbiddenAccess permission is not there for the requested page

404 Not Found The server can not find the requested page

405 Method Not Allowed The method specified in the request is not allowed

406 Not AcceptableThe server generates a response which the client will not accept

407 Proxy Authentication Required Before the request could be served you

must authenticate with a proxy server.408 Request Timeout

The request took longer than the server was prepared to wait

409 Conflict The request could not be completed because of a conflict

410 Gone The requested page is no longer available

411 Length RequiredThe "Content-Length" is not defined. The server cannot accept the request without it

412 Precondition Failedhe precondition given in the request evaluated to false by the server

413 Request Entity Too Large If the request entity is too large the

server will not accept the request,414 Request-url Too Long

If the url is too long.the server will not accept the request, Occurs when you convert a "post" request to a "get" request with a long query information

415 Unsupported Media Type If the media type is not supported The

server will not accept the request, because the


416 417 Expectation Failed

5xx: Server Error

Message: Description:500 Internal Server Error

Due to an unexpected condition, The request was not completed.

501 Not ImplementedThe functionality required was not supported by the server. The request was not completed.

502 Bad GatewayThe request was not completed. The server received an invalid response from the upstream server

503 Service UnavailableThe server is temporarily overloading or down, Therefore the request was not completed.

504 Gateway Timeout The gateway has timed out505 HTTP Version Not Supported The "http protocol"version is not

supported by the server

XHTML Event Attributes

The ability to trigger actions in the browser by HTML events is New to HTML 4.0, like executing a JavaScript when a user clicks on an HTML element. Here is a list of attributes that define event actions. these attributes can be inserted into HTML tags

Window EventsThese are valid only in body and frameset elements

http://www.academictutorials.com/xhtml/xhtml-events.asp

http://www.academictutorials.com/xhtml/xhtml-events.asp


Attribute Value Descriptiononload script Script to be run when a document loadsonunload script Script to be run when a document

unloads

Form Element EventsThese are valid only in form elements.

Attribute Value Descriptiononchange script Script to be run when the element

changesonsubmit script Script to be run when the form is

submittedonreset script Script to be run when the form is resetonselect script Script to be run when the element is

selectedonblur script Script to be run when the element loses

focusonfocus script Script to be run when the element gets

focus

Keyboard EventsNot valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.

Attribute Value Descriptiononkeydown script What to do when key is pressedonkeypress script What to do when key is pressed and

releasedonkeyup script What to do when key is released

Mouse Events

These are not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.

Attribute Value Descriptiononclick script Action will be taken on mouse clickondblclick script Action will be taken on doubleclicking

the mouse onmousedown script Action to be performed when mouse

button is pressedonmousemove script Action to be performed when mouse

pointer movesonmouseover script Action to be performed when mouse

pointer moves over an elementonmouseout script What to do when mouse pointer moves

out of an elementonmouseup script What function to carry when mouse

button is released

XHTML Summary

By this tutorial we have learnt to create clean and stricter HTMl pages

In this tutorial we have learnt that all XHTML elements must be properly nested, XHTML documents must be well-formed, all the tag names should be in written in lowercase, and that all XHTML elements must be closed.

We have also learnt that,As in HTML html,head,title,and body elements should be present in XHTML.And a DOCUMENT decleration must be made.

What is an XHTML File? XHTML stands for EXtensible HyperText Markup Language XHTML is similar to HTML,The only difference is XHTML is

stricter and cleaner version of HTML An XHTML file contains small mark up tags The way how the page must be displayed in the browser is

described by these markup tags

An XHTML file must have an .xhtml file extension

Using any simple text editor XHTML file can be created

The Most Important Differences: Tag and attribute names must be

written in lower-case Elements must be nested

properly, no overlapping Non-empty elements must be

closed Empty elements must be

terminated All attribute values must be

quoted Attribute value cannot be

shortened


Standard Attributes

At the opening of the element tag only the attribute must be specified. closing tag of an element merely contains a back slash and tag name

All attribute names must be in lower case. All attributes must have a value. All attribute should hold a values and always be double

quotes. Here double quote and two single quotes are not the same.

All attributes must be placed in a list seperated by blank space and no other characters must be included between them

XHTML Tags

XHTML tags are used to mark-up XHTML elements Tags in XHTML are always surrounded by characters

< and >

These characters are called angel brackets All tags in XHTML come in pairs for example <b>

and </b> In these pair of tags,the first tag is the start tag,and

the second tag is called end tag The text that lies between the start tag and the end

tag is called the element content

XHTML tags are case sensitive,

XHTML Tutorial

Documents

Transcript of XHTML Tutorial