classical encryption techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf ·...
TRANSCRIPT
Chapter 2:-
Introduction to XHTML
Compiled By:- Sanjay Patel
Assistant Professor,
SVBIT.
Outline
Introduction to XHTML
Move to XHTML
Meta tags
Character entities
Frames and frame sets
Inside Browser
Sanjay Patel
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.
What is XHTML?
Sanjay Patel
Document Structure
XHTML Elements
XHTML Attributes
XHTML Structure
Sanjay Patel
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.
<!DOCTYPE> declaration
Sanjay Patel
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
Document Structure
Sanjay Patel
Strict
Transitional
Frameset
XHTML document Structure
Sanjay Patel
Example
Sanjay Patel
<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/D
TD/xhtml1-strict.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.
<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w
3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Transitional - This should be used
if you want to use presentational
features of HTML in your page.
<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DT
D/xhtml1-frameset.dtd">
Frameset - This should be used if
you want to have frames on your
page.
XHTML elements must be properly nested.
XHTML elements must always be closed.
XHTML elements must be in lowercase.
XHTML Elements
Sanjay Patel
Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden
XHTML Attributes
Sanjay Patel
HTML XHTML
The HTML tags are case insensitive.
Hence <body> or <BODY> or
<Body> are treated as one and the
same
The XHTML is case sensitive and all the
tags in XHTML document must be
written in lower case.
We can omit the closing tags
sometimes in HTML document. Can
have empty/open tags e.g. <br>,
<p>
For every tag there must be closing
tag. All the unclosed tags must be
closed e.g. <br/>, <p></p>
In HTML even if we do not follow the
nesting rules strictly it does not cause
much difference.
In XHTML documents is nesting
An application of SGML(Standard
Generalized Markup Language)
An application of xml
Difference between HTML and XHTML
Sanjay Patel
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):
Why XHTML?
Sanjay Patel
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>
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.
Why XHTML?
Sanjay Patel
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
Quick list of syntax rules
Sanjay Patel
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:
Attribute names must be in lower-case
Sanjay Patel
<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>
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:
Attribute values must be quoted
Sanjay Patel
<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>
Example HTML<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>Sanjay Patel
XHTML<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>
Sanjay Patel
Basic Doc Type
Sanjay Patel
Structure Module body, head, html, title
Presentation module b, big, hr, i, small, sub, sup, tt
Text Module abbr, acronym, address, blockquote, br, cite, code, dfn, div,
em,
h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var
Hypertext Module a
List Module dl, dt, dd, ol, ul, li
Forms Module button, fieldset, form, input, label, legend, select, optgroup,
option, textarea
Basic Tables Module caption, table, td, th, tr
Image Module img
Metainformation Module meta
Link Module link
Stylesheet module style element
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
Sanjay Patel
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
Metatags
Sanjay Patel
HTML <meta name="keywords" content="html, css, JavaScript">
XHTML <meta name="keywords" content="html, css, JavaScript" />
Meta (keyword)
Sanjay Patel
The above is an example of using the <meta> tag
to provide keyword information that can be used
by search engines.
HTML <meta name="description" content="Web Page Design">
XHTML <meta name="description" content="Web Page Design" />
Meta (Description)
Sanjay Patel
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.
HTML <meta http-equiv="refresh" content="300">
XHTML <meta http-equiv="refresh" content="300" />
Meta (http-equiv)
Sanjay Patel
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