![Page 1: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/1.jpg)
Chapter 2:-
Introduction to XHTML
Compiled By:- Sanjay Patel
Assistant Professor,
SVBIT.
![Page 2: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/2.jpg)
Outline
Introduction to XHTML
Move to XHTML
Meta tags
Character entities
Frames and frame sets
Inside Browser
Sanjay Patel
![Page 3: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/3.jpg)
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
![Page 4: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/4.jpg)
Document Structure
XHTML Elements
XHTML Attributes
XHTML Structure
Sanjay Patel
![Page 5: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/5.jpg)
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
![Page 6: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/6.jpg)
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
![Page 7: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/7.jpg)
Strict
Transitional
Frameset
XHTML document Structure
Sanjay Patel
![Page 8: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/8.jpg)
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.
![Page 9: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/9.jpg)
XHTML elements must be properly nested.
XHTML elements must always be closed.
XHTML elements must be in lowercase.
XHTML Elements
Sanjay Patel
![Page 10: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/10.jpg)
Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden
XHTML Attributes
Sanjay Patel
![Page 11: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/11.jpg)
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
![Page 12: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/12.jpg)
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>
![Page 13: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/13.jpg)
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
![Page 14: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/14.jpg)
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
![Page 15: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/15.jpg)
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>
![Page 16: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/16.jpg)
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>
![Page 17: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/17.jpg)
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
![Page 18: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/18.jpg)
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
![Page 19: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/19.jpg)
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
![Page 20: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/20.jpg)
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
![Page 21: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/21.jpg)
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
![Page 22: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/22.jpg)
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.
![Page 23: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/23.jpg)
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.
![Page 24: Classical Encryption Techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf · XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to](https://reader030.vdocuments.us/reader030/viewer/2022011914/5fbd63c7f66bbd790d7b009a/html5/thumbnails/24.jpg)
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