xp tutorial 9 1 working with xhtml. xp sgml 2 standard generalized markup language (sgml) a standard...

XP

Tutorial 9

1

Working with XHTML

XPSGML

2

Standard Generalized Markup Language (SGML) A standard for specifying markup languages.Large, complex standard capable of specifying many

different types of markup languages.Device and System Independent

MML: Math Markup Language is a markup language:

Rendering

Code

XPSGML HTMLSGML XML XHTML

3

SGML RULES

HTML

XML RULES

XHTMLInconsistent, browser support difficult

Consistent rules for efficient browser support

Many other markup

languages

Other XML languages

XP

HTML and XHTML

4

HTML (Hypertext Markup Language)1998: Version 4.0 most current (4.01 not officially

implemented)Can be applied inconsistentlyBrowser code must be complex, inefficient, to

handle inconsistencies.

XHTML (Extensible Hypertext Markup Language)2002: Version 1.1 most current (1.0 still extensively

used)Strict standards for consistency.Browser code can be efficient, run on small devices.

XP

XHTML Versions

5

XPAbout XHTML Documents1. An XHTML document that correctly follows the

syntax rules is called a well-formed document.

2. Because XHTML documents conform to XML rules, enter an “XML declaration” (XML Prolog) as the first line of the file.

3. A special document called a “DTD” (document type definition) is used to specify correct content and structure.

4. A special attribute called the “xhtml namespace” is inserted in the opening <html> tag.

5. If the document is well-formed and also has correct content and structure, it is called a valid document.6

XPAn XHTML document that correctly follows the syntax rules is called a well-formed document.

7 “attribute minimization” not allowed

XPBecause XHTML documents conform to XML rules, enter an “XML declaration” (XML Prolog) as the first line of the file.

8

For XHTML documents, use the declaration:

<?xml version=“1.0” encoding=“UTF-8”?>

XML Version number

character encoding

XPA special document called a “DTD” (document type definition) is used to specify correct content and structure.

9

• The DOCTYPE declaration, which tells which DTD is associated with the document, is the second line of the file, after the XML prolog statement. It is used to tell the browser what version of the markup language the page is written in.

<!DOCTYPE root type “id” “url”>

XPDocument Type Definition (“DTD”)

10

- The DTD specifies the rules for a valid document

- There are 3 types of the XHTML DTD- Transitional: allows many of the older HTML

features but not framesets- Frameset: allows many of the older HTML

features including framesets- Strict: does not allow any presentational features

or deprecated HTML elements and attributes. Does not support frames or inline frames. Used when there is a need to strictly conform to the latest standards

- There are also definitions for straight HTML documents.dtd_list.txt This link can also be found on my Data for Labs page

XPDocument Elements that are not valid under the Strict DTD

11

Elements not allowed under the strict DTD are:

appletbasefontcenterdirfontframeframeset

iframeisindexmenunoframessstrikeu

http://www.w3schools.com/tags/tag_dir.asp List and description of all tags

XPAttributes under the Strict DTD

12

Some attributes are restricted, while others are required in XHTML

Restricted (prohibited) attributes under the strict XHTML DTD are shown on page 536 of the textbook.

Required attributes under the strict XHTML DTD are shown on page 537 of the textbook.

XPAttributes Prohibited under the Strict DTD

13

XPAttributes Required under the Strict DTD

14

XPA special attribute called the “xhtml namespace” is inserted in the opening <html> tag.

15

• To set XHTML as the default namespace for a document, add the xmlns attribute to the html element with the following value:

<html xmlns=“http://www.w3.org/1999/xhtml”>

• A namespace is any string of characters that uniquely identifies the set of elements and attributes belonging to the particular language.

dtd_list.txt This link can also be found on my Data for Labs page

XPIf the document is well-formed and also has correct content and structure, it is called a valid document

16

This is an example of an xhtml document that correctly conforms to the “Strict” DTD

XHTML can be checked for validation at http://validator.w3.org

XPValidation of XHTML

17

Click “Validate by File Upload”Click “Browse”


18

Select the file you want to validateClick “Check”


19

If it is valid, you get “…successfully checked. . .”


20

This is an example of an xhtml document that does not conform to the “Strict” DTD

(Can you see the error?)


21

If it is not valid you get “Error found . . . “

“bgcolor” is not allowed under the strict DTD

http://validator.w3.org


22

To validate under a different version of the DTD, change the DOCTYPE declaration

XPUsing Style Sheets and XHTML

23

• Style sheets sometimes contain characters that could cause problems for the browser:

• A CDATA section marks a block of text so that the browser will not treat text as html code:

> means any img element that is a direct descendent of a p element.

• If your code contains characters like > , it’s best to use an external style sheet instead of an embedded one.

XPFixing XHTML Validation Errors

24

• Some examples of things you might need to do to make an xhtml file pass the validator check:

Convert body element attributes to styles in a style sheet.


25


Correct errors for one or two-sided elements not properly closed or one-sided tags not terminated.


26


Use the float style to align inline images.

180-img-styles.htm


27


Remove/replace deprecated elements or attributes.

185-img-styles.htm


28




29




30


Replace formatting done with <b> and or <font> by styles.


31


Replace prohibited

attributes such as name with a valid attribute such as

id

XPThe End

32