classical encryption techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf ·...

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.



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.



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


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:


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


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


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

classical encryption techniquessvbitce2010.weebly.com/uploads/8/4/4/5/8445046/che_2_xhtml.pdf ·...

Documents