Chapter 2:- Introduction to XHTML Compiled By:- Assistant Professor, SVBIT.
Outline Introduction to XHTML Move to XHTML Meta tags Character entities Frames and frame sets Inside Browser
What is XHTML? XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version of HTML 4.01 XHTML is HTML defined as an XML application XHTML is supported by all major browsers.
XHTML Structure Document Structure XHTML Elements XHTML Attributes
<!DOCTYPE> declaration The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly. HTML5 is not based on SGML, and therefore does not require a reference to a DTD.
Document Structure XHTML DOCTYPE is mandatory. The doctype should be the very first line of your document and should be the only thing on that line. You don't need to worry about this confusing older browsers because the Doctype is actually a comment tag. It is used to find out the code which the page is written in, but only by browsers/validators which support it, so this will cause no problems. After the Doctype line, the actual XHTML content can be placed. As with HTML, XHTML has <html> <head> <title> and <body> tags but, unlike with HTML, they must all be included in a valid XHTML document
XHTML document Structure Strict Transitional Frameset
Example <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/d TD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w 3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dt D/xhtml1-frameset.dtd"> Strict - This is used mainly when the markup is very clean and there is no 'extra' markup to aid the presentation of the document. This is best used if you are using Cascading Style Sheets for presentation. Transitional - This should be used if you want to use presentational features of HTML in your page. Frameset - This should be used if you want to have frames on your page.
XHTML Elements XHTML elements must be properly nested. XHTML elements must always be closed. XHTML elements must be in lowercase.
XHTML Attributes Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden
Difference between HTML and XHTML HTML The HTML tags are case insensitive. Hence <body> or <BODY> or <Body> are treated as one and the same We can omit the closing tags sometimes in HTML document. Can have empty/open tags e.g. <br>, <p> In HTML even if we do not follow the nesting rules strictly it does not cause much difference. An application of SGML(Standard Generalized Markup Language) XHTML The XHTML is case sensitive and all the tags in XHTML document must be written in lower case. For every tag there must be closing tag. All the unclosed tags must be closed e.g. <br/>, <p></p> In XHTML documents is nesting An application of xml
Why XHTML? Many pages on the internet contain "bad" HTML. The following HTML code will work fine if you view it in a browser (even if it does NOT follow the HTML rules): <html> <head> <title>this is bad HTML</title> <body> <h1>bad HTML <p>this is a paragraph </body>
Why XHTML? Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret a "bad" markup language. Therefore - by combining the strengths of HTML and XML, XHTML was developed. XHTML is HTML redesigned as XML.
Quick list of syntax rules Attribute names must be in lower-case Attribute values must be quoted Attributes cannot be minimized The name attribute is replaced by the id attribute Some elements are mandatory
Attribute names must be in lower-case Not just attributes, but tags as well must all be in lowercase in XHTML. Example with uppercase tags and attributes: The above example fixed to conform to XHTML standards: <html> <head> <TITLE>Tags properly closed</title> </head> <body> <TABLE> <TR> <TD ALIGN="CENTER">Cell 1</TD> <TD ALIGN="CENTER">Cell 2</TD> </TR> </body> </html> <html> <head> <title>tags properly closed</title> </head> <body> <table> <tr> <td align="center">cell 1</td> <td align="center">cell 2</td> </tr> </body> </html>
Attribute values must be quoted Attributes should always be quoted. Even though a page may appear as you intend it to even if you don't quote attributes, the page will not validate with an XHTML validator. Also, if the value given to the attribute that is not quoted has at least one space, the page may actually not appear as you intend it to. Attributes not quoted: <html> <head> <title>quoting attributes</title> </head> <body> <input type="button" value=i am a button /> <br /><br /> <a href=http://www.yahoo.com target="_blank"> Yahoo search engine </a> </body> </html>
<html> <head> <title>quoting attributes</title> </head> <body> Example HTML <input type="button" value=i am a button /> <br /><br /> <a href=http://www.yahoo.com target="_blank"> Yahoo search engine </a> </body> </html>
<html> <head> <title>quoting attributes</title> </head> <body> XHTML <input type="button" value="i am a button" /> <br /><br /> <a href="http://www.yahoo.com" target="_blank"> Yahoo search engine </a> </body> </html>
Basic Doc Type Structure Module Presentation module Text Module Hypertext Module List Module Forms Module Basic Tables Module Image Module Metainformation Module Link Module Stylesheet module body, head, html, title b, big, hr, i, small, sub, sup, tt abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var a dl, dt, dd, ol, ul, li button, fieldset, form, input, label, legend, select, optgroup, option, textarea caption, table, td, th, tr img meta link style element
Metatags Metadata is information about data. The <meta> tag provide the metadata about the HTML document. Meta elements are typically used to specify page description, key words, author of the document and so on. The <meta> tag is always written within <head> section.
Metatags Specify information about a document Attribute name Identifies the type of meta element keywords ( name = keywords ) Provides search engines with a list of words that describe a page description ( name = description ) Provides a description of a site Attribute content Provides the information search engine use to catalog pages
Meta (keyword) HTML <meta name="keywords" content="html, css, JavaScript"> XHTML <meta name="keywords" content="html, css, JavaScript" /> The above is an example of using the <meta> tag to provide keyword information that can be used by search engines.
Meta (Description) HTML <meta name="description" content="web Page Design"> XHTML <meta name="description" content="web Page Design" /> The above is an example of using the <meta> tag to provide a description of the web page. This information may be used by search engines.
Meta (http-equiv) HTML <meta http-equiv="refresh" content="300"> XHTML <meta http-equiv="refresh" content="300" /> The above is an example of using the <meta> tag to re-load a web page after a specified number of seconds. In this example is it 300 seconds. This technique can be used to automatically refresh a web page that has frequently changing content like would be the case for a website that displays the current temperature