## Section 2 - XHTML and DTD ##: XHMTL

## SECTION 2 - XHTML and DTD ##
Code rules
Attributes
Font SIZE/COLOR
Font Color
XHMTL
GOALS
Evolution
User Agents
Rules
Tags being written out
Empty Elements
DTD
XHTML Documument Type
Transitional DTD
Frameset DTD
Strict DTD
Presentational Material
Validating XHTML
XHTML Elements/attributes
Block-level elements
Inline elements
Standard Attributes
Defining the language
Title attribute
XHTML Namespace
page 19
XHTML
Goals
1) to separate the way documents are structured from the way
they are displayed
2) eliminate sloppy code- make it well-formed
User Agents
• web expansion to mobile phones, PDAs, software for visually
impaired
• devices of receiving and displaying data
• many items still not available: frames, tables, graphics
- these are in development
• other applications may collect and process data, but not display
• HTML is not suitable - allows sloppy code, transition to visual
page 20
Sloppy code...
(type exactly-and it will still work)
<h1>Chapter 4 - The Apes</h1><p>
"...Old Tantor; the elephant alone of all the wild savage life,
feared him not. When tantor trumpeted, the great ape scur-
ried with his fellows high among the trees of the second
terrace..."<p>
from<i> Tarzan of the Apes</i><br>
by<b> Edgar Rice Burrows
XHTML Rules
1) lower case tags
2) all tags must close
- eg) <p>.....</p>
3) must give proper instruction to browser (DTD)
4) must include base tags <html> <head><title>
5) tags imbedded based on importance <p><img>...</img></p>
page 21
Some of the tags being written out of Strict

XHTML - CSS replaces almost all:
<font>
<center>
<b> <i> <s> <u>
<frame> <iframe>
<blockquote> etc...
Empty Elements
Do not contain content between the opening and closing tags
<hr> becomes <hr />

<br> becomes <br />
<img> becomes <img src="name.gif" />
long way of writing tags <br></br> (doesn't validate)

page 22
DTD - Document Type Definition

- required for ALL XHTML documents
- defines tags and attributes that can be used
- if the document conforms = valid; if not = invalid
- use a Validator to check if code is valid (w3.org)
- when the browser opens an HTML document, it first compares
the code to the DTD and then determines if anything is missing.
It ignores anything it doesn’t know.
XHTML Document Type

1) choose which type of HTML you will use:
frames, CSS, visual components (eg. <b> <i> or <em>)
2) MUST include <!DOCTYPE> declaration,
<html><head><title>
3) Choose type of XHTML DTD: Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• PUBLIC= DTD is available on the web (system used if local)

• Public identifier string must have URL - if the browser does not have
XHTML 1.0 built in, it will attempt to located the DTD at the URL
• if no DOCTYPE, will revert to HTML
page 23
Transitional DTD
• allows you to continue using some discontinued items with
well-formed requirements of XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>Great American Novel</title></head>
<body>
<p>It was a <s>dark and stormy night</s> <u>bright and sunny day</u>.
<s>Lightning streaked the sky, followed by an angry explosion of thunder.</s>
<u>High, soft clouds accented the sky and a soft wind gently swayed the
trees.</u></p>
</body></html>
Frameset DTD
- includes <frameset> and <frame> elements
- will eventually be written out in favor of STRICT DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Strict DTD
- includes <frameset> and <frame> elements
- will eventually be written out in favor of STRICT DTD

page 24
Document
Does it have frames?
Does it use presentational markup Use XHTML 1.0 Frameset
no yes
Use XHTML 1.0 Strict Is all of the presentation markup in a stylesheet?
No yes
Use XHTML 1.0 Transitional Use XHTML 1.0 Strict
(presentation material = text color, font faces, text size, borders, cell padding
- if any of these tags exist, it must be transitional.)
Validating XHTML
• browser may ignore errors and display
Markup is “valid” when it contains no errors (example: forget-

ting to close a tag’s bracket) and no illegal tags or attributes
(example: the “height” attribute, applied to a table, is not legal
XHTML)
http://validator.w3.org
or for mac:http://validator.w3.org/file-upload.html
1) browse for file
2) iso-9959-1; western OR charset=utf-8
page 25
Code protocol/rules
• lower case (for XHTML)
• 5 spaces for first tab, 3 spaces for next (for tables)
• each tag on its own line
• carriage returns disregarded
• space bar makes only one space, no matter how many times you
hit it.
• tabs ignored
• multiple <p> tags ignored
• use comments to put notes in html
- 
Elements
• structure tags
• use < and >
• travel in pairs with a start and stop <h1> Hello World</h1>
Attributes
• descriptive terms that further describe or expand a tag
• only apply to the opening tag
• separated from the tag by a space
• ALWAYS followed by =" "
-<img src="name.gif">
• tags can have multiple attribute
-<table width="100%" cellpadding="0" cellspacing="0">
page 26
Simple XHTML document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>A Simple XHTML Document</title>
</head>
<body>
<h1>A Simple XHTML Document</h1>
<p>This is a simple <strong>XHTML document</strong>. XHTML is a refor-
mulation of HTML 4.0 in XML. XML is the eXtensible Markup Language, and
was designed to both meet the formatting need of modern web-designers, while
attempting to retain the content emphasis of HTML/SGML's past.<br />Using
XHTML (and XML), a web-designer can customize the formatting of their docu-
ments to their heart's content, as well as create well-formed documents which con-
tain information easily accessible by external programs.</p>
<img src="image.jpg" />
</body>
</html>
Borrowing the DTD

URL: www.w3.org
View Menu > View Source
Installing Firefox Developer Tools

1) open the Firefox Browser
2) www.firefox.com
3) Top Menu > Addons > Search : Web Developer
4) Web Developer App by Chris Pederick > install
page 27
XHTML Elements
ELEMENT DESCRIPTION
<address> Address
<blockquote> Block quotation (must contain <p> tags)
<del> Deleted text
<div> Generic block-level container
<dl> Definition list
<fieldset> Form control group
<form> Interactive form
<h1>- <h6> Heading elements
<hr /> Horizontal rule
<ins> Inserted text
<noscript> Alternate script content
<ol> Ordered list
<p> Paragraph
<pre> Preformatted text
<table> Table
<ul> Unordered list
Block-level elements
- appear on their own line
- can contain other block-level elements and inline elements
Inline elements
- text-level
- not on their own line, but within the block-level element
<strong> <br /> <emphasis>, etc
- not well formed if the block level is embedded in the inline
eg) <strong><p>hello</p></strong>
This is incorrect
page 28

<head><title>Central Valley Farmers' Market Web</title>

</head>
<body>
<h1>Central Valley Farmer's Market</h1>
<p>The <strong>Central Valley Farmers' Market</strong> offers plenty
of fresh picked fruits, vegetables, herbs, and flowers. You will also find
lots of baked goods, jams, honey, cheeses, and other products.</p>
</body>
</html>
Standard Attributes
- to configure elements
- always followed by ="..."
- some attributes can only be used with certain elements
eg) img src=""
ATTRIBUTE DESCRIPTION
class identifies various elements as part of the same group
dir specifies the direction of the text
id uniquely identifies an individual element in a document
lang / xml : lang specifies the language in which the contents of an element
were originally written
style defines style information for a specific element
title provides descriptive text for an element
page 29
Defining the language

- web sites are viewed internationally
lang - defines the language for html
xml : lang - defines language for xml
- use both for XHTML
- a 2-letter code represents the language eg. "en"
- also define the direction that the language is read in
eg. "ltr"

Title Attribute
• provides descriptive text for an element
• text appears when the mouse hovers over the object
• also referred to as a ToolTip in Internet Explorer
• only works on newer browsers

<head><title>Titles and languages</title>
</head>
<body>
<p title="The American translation is 'Mama was hit by a truck after eating a bag of
potato chips for dessert.'" lang="en-UK" xml:lang="en-UK" dir="ltr">
Mum got run over by a lorry after eating a packet of crisps for afters.</p>
</body></html>
page 30
XML Namespace
• organizes elements and attributes of an XML document into
separate groups
• attribute of html
• namespace for XHTML is XMLNS
• must be used for proper XHTML documents

## Section 2 - XHTML and DTD ##: XHMTL

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

## Section 2 - XHTML and DTD ##: XHMTL

Hochgeladen von

Copyright:

Verfügbare Formate

## SECTION 2 - XHTML and DTD ##

Some of the tags being written out of Strict

<hr> becomes <hr />

long way of writing tags <br></br> (doesn't validate)

DTD - Document Type Definition

XHTML Document Type

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

• PUBLIC= DTD is available on the web (system used if local)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Does it have frames?

Does it use presentational markup Use XHTML 1.0 Frameset

Use XHTML 1.0 Strict Is all of the presentation markup in a stylesheet?

Use XHTML 1.0 Transitional Use XHTML 1.0 Strict

Markup is “valid” when it contains no errors (example: forget-

Simple XHTML document

Borrowing the DTD

Installing Firefox Developer Tools

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><title>Central Valley Farmers' Market Web</title>

Defining the language

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Das könnte Ihnen auch gefallen