INTRODUCTION TO XHTML WHAT IS XHTML XHTML stands

  • Slides: 14
Download presentation
INTRODUCTION TO XHTML

INTRODUCTION TO XHTML

WHAT IS XHTML? XHTML stands for EXtensible Hyper. Text Markup Language • XHTML is

WHAT IS XHTML? XHTML stands for EXtensible Hyper. Text Markup Language • XHTML is aimed to replace HTML • XHTML is almost identical to HTML 4. 01 • XHTML is a stricter and cleaner version of HTML • XHTML is HTML defined as an XML application •

XHTML - WHY? XHTML is a combination of HTML and XML (EXtensible Markup Language).

XHTML - WHY? XHTML is a combination of HTML and XML (EXtensible Markup Language). • XHTML consists of all the elements in HTML 4. 01 combined with the syntax of XML. • 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> <h 1>Bad HTML </body>

DIFFERENCES BETWEEN XHTML AND HTML The Most Important Differences: • XHTML elements must be

DIFFERENCES BETWEEN XHTML AND HTML The Most Important Differences: • XHTML elements must be properly nested • XHTML documents must be well-formed • Tag • All names must be in lowercase XHTML elements must be closed

� Elements Must Be Properly Nested <b><i>This text is bold and italic</i></b> Documents Must

� Elements Must Be Properly Nested <b><i>This text is bold and italic</i></b> Documents Must Be Well-formed <html> <head>. . . </head> <body>. . . </body> </html> Tag Names Must Be In Lower Case <body><p>This is a paragraph</p></body>

 All XHTML Elements Must Be Closed Non-empty elements must have an end tag.

All XHTML Elements Must Be Closed Non-empty elements must have an end tag. <p>This is a paragraph</p> Empty Elements Must Also Be Closed Empty elements must either have an end tag or the start tag must end with />. Example: <hr /> // for drawing horizontal line <img src="happy. gif" alt="Happy face" />

XHTML Syntax Some More XHTML Syntax Rules: Attribute names must be in lower case

XHTML Syntax Some More XHTML Syntax Rules: Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden The id attribute replaces the name attribute The XHTML DTD defines mandatory elements

 • Attribute names must be in lower case <table width=100%> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src= “

• Attribute names must be in lower case <table width=100%> <img src= “ URL” width=200 height=300> • Attribute Minimization Is Forbidden <input checked="checked" /> <option selected="selected" /> <frame noresize="noresize" /> • The id Attribute Replaces The name Attribute <img src="picture. gif" id="picture 1" />

Mandatory XHTML Elements <!DOCTYPE Doctype goes here> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head>

Mandatory XHTML Elements <!DOCTYPE Doctype goes here> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <title>Title goes here</title> </head> <body>Body text goes here</body> </html> The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element, and it should not have a closing tag.

XHTML DTD The XHTML standard defines three Document Type Definitions. The most common is

XHTML DTD The XHTML standard defines three Document Type Definitions. The most common is the XHTML Transitional. An XHTML document consists of three main parts: the DOCTYPE 2. the Head 3. the Body 1.

XHTML document types There are currently 3 XHTML document types: STRICT TRANSITIONAL FRAMESET

XHTML document types There are currently 3 XHTML document types: STRICT TRANSITIONAL FRAMESET

XHTML 1. 0 Strict <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN"

XHTML 1. 0 Strict <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" http: //www. w 3. org/TR/xhtml 1/DTD/ xhtml 1 -strict. dtd"> Use this when you want really clean markup, free of presentational clutter. Use this together with CSS.

XHTML 1. 0 Transitional <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN’’

XHTML 1. 0 Transitional <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN’’ "http: //www. w 3. org/TR/xhtml 1 /DTD/xhtml 1 -transitional. dtd"> Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets.

XHTML 1. 0 Frameset <!DOCTYPE html. PUBLIC "-//W 3 C//DTD XHTML 1. 0 Frameset//EN""http:

XHTML 1. 0 Frameset <!DOCTYPE html. PUBLIC "-//W 3 C//DTD XHTML 1. 0 Frameset//EN""http: //www. w 3. org/TR/xhtm l 1/DTD/xhtml 1 -frameset. dtd"> Use this when you want to use HTML Frames to partition the browser window into two or more frames.