XHTML Extensible Markup Language

XHTML
Extensible Markup Language
Semantic
Semantic refers to content meaning
and to the possible ways information
may be interpreted, accessed, and
manipulated.
Semantic
Semantic meaning exists outside of the
document. A semantic web will create
an environment where tasks can be
carried out for users.
Structure
Structure expresses the form of a
document, how it is organized logically,
regardless of meaning.
Structure
Structure divides documents into a
hierarchical tree of elements.
Style
Style refers to presentation, to how the
document is rendered.
XHTML 1.0
XHTML 1.0, W3Cs recommendation
for the latest version of HTML 4.0
XHTML 1.1 Modularization

XHTML 1.1 Modularization provides a
way to subset and extend XHTML,
bridging XHTML to XML and allowing
better transition to emerging platforms.
XHTML Basic 1.0

XHTML Basic 1.0 provides a minimal
set of modules to be used for output
devices such as mobile phones, PDAs,
televisions, pagers, car navigation
systems, portable game machines, and
other devices where a simple XHTML
can be shared across multiple output
devices.
9
XHTML Syntax
Elements consist of the start tag, the
elements contents, and the end tag.
<h1>DowntownCinema</h1>
10
XHTML Tags
XHTML tags are case-sensitive.
<h1> <H1>
11
XHTML Tags
XHTML tags must close an element
in one of two ways:
<p>textcontent</p>
for content elements or
<hr/>
for empty elements
12
Three Basic Levels to the Structure

of XHTML Documents
First level, the document structure,
contains major sections such as:
head, body, and script
13

of XHTML Documents
Second level contains the divisions
within the major sections such as:
title, p, and h1
14

of XHTML Documents
Third level, typically within body, is the
substructure of elements and their
children such as:
ol, ul ,and li, tables with tr and td
15
The Head Element

<head> includes information for the
browser, including a title for the
document, keywords, link information,
and information not necessary for the
user to view directly.
16
<title>
The only required element of head is
<title>.
17
Content
Content within <body>is what the
end user sees when the document is
rendered in the browser or another
user agent.
18
XHTML and XML

XHTML and XML documents begin
with the XML declaration:
<?xmlversion="1.0"?>
19
The XML Declaration

The XML declaration is not mandatory
for XHTML files unless you plan to use
Unicode character sets other than the
default UTF-8 or UTF-16.
20
The DOCTYPE Declaration

The DOCTYPE declaration must
declare the document type and refer to
one of three DTDs at the W3C, or to a
DTD stored on your computer.
21
The XHTML 1.0 Strict DTD

<!DOCTYPEhtmlPUBLIC
"//W3//DTDXHTML1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DT
D/xhtml1strict.dtd">
22
The XHTML 1.0 Transitional DTD

<!DOCTYPEhtmlPUBLIC
"//W3C//DTDXHTML1.0
Transitional//EN"
"http://www.w3.org/TR/
xhtml1/DTD/xhtml1
transitional.dtd">
23
The XHTML 1.0 Frameset DTD

<!DOCTYPEhtmlPUBLIC
"//W3C//DTDXHTML1.0
Frameset//EN"
"http://www.w3.org/TR/
xhtml1/DTD/xhtml1
frameset.dtd">
24
The XHTML 1.1 Modularization DTD

<!DOCTYPEhtmlPUBLIC
"//W3C//DTDXHTML1.1//EN"
"http://www.w3.org/TR/xhtml11/
DTD/xhtml11.dtd">
25
The XHTML Basic 1.0 DTD

<!DOCTYPEhtmlPUBLIC
"//W3C//DTDXHTMLBasic
1.0//EN"
"http://www.w3.org/TR/xhtml
basic/xhtmlbasic10.dtd">
26
The Root Element

The root element is the parent of all
other elements, the element within
which other elements are nested.
27
The Root Element

The root element begins the document
tree, the structure that will determine
the structure and data manipulation
capabilities of your documents.
28
The Root Element for XHTML is:

<html>...</html>
29
Namespace
Namespace is the mechanism that
uniquely identifies prefixes. The
purpose is to solve potential problems
of ambiguity and name collision with
XHTML and XML documents on the
web.
30
The Syntax for the XHTML

Namespace is:
<html
xmlns="http://www.w3.
org/1999/xhtml"
xml:lang="en"
lang="en">...
</html>
31
Well-formedness
Well-formedness is an new concept
introduced by XML. XHTML and XML
documents are considered well-formed
if they meet the following set of W3C
recommendation criteria:
32
Well-formedness
1) Elements must be correctly nested
2) Element and attribute names must be in
lower case
3) For non-empty elements, end tags are
required
4) Attribute values must always be quoted
5) Attribute-value pairs must be written in full
33
Well-formedness
6) Empty elements must either have an end
tag or the start tag must end with />
7) Whitespace handling in attribute values.
User agents will strip whitespace from
attribute values and map sequences of one
or more whitespace characters to a single
interwoven space
34
Well-formedness
8) script and style elements are declared as
having #PCDATA (text). < and & will be treated
as the start of markup.
9) SGML exclusions (the ability to exclude
specific elements from being contained within
an element in the DTD) are not allowed
35
In XHTML
In XHTML, the id attribute is defined to
be of type ID. id attribute must be
used when defining fragment
identifiers. There can be only a single
attribute of type ID per element, and
the value of id (the name given to id)
may be used only once per document.
36
Valid Documents
An XHTML or XML document is
considered valid if it meets all of the
W3C well-formedness criteria and if it
validates against the referenced DTD.
37
XHTML
XHTML is extensible, elements and
entities may be created in addition to
those provided by the HTML W3C
specifications. A second DTD, in
addition to the W3C DTD would be
added, the W3C DTD cannot be
modified.
38
Nesting
In this example, nesting is correct.
<partnumber> has a child element,
<partname>. The start tag and end
tag for that child element fall within
the start tag and end tag for
<partnumber>, their parent:
<partnumber>..<partname>..
</partname>..</partnumber>
39
Additional Elements
Headers allow you to define sections of
your text by giving them titles. Header
tags are placed within the body section
of the XHTML shell. Headers tags run
from level 1, the largest <h1>..</h1>
to level 6, the smallest <h6>..</h6>
40
Additional Elements
Paragraphs of text are introduced with
the element <p>. Using <p>..</p>,
the paragraph tag, text will display
content and drop down one line of
space before the next element
appears.
41
Additional Elements
Three types of lists, unordered lists
(also called bulleted lists), ordered lists
(also called numbered lists), and
definition lists (a list of terms paired
with associated definitions, such as in
a glossary) are available.
42
Additional Elements
For unordered lists, the <ul> element
tells the document that each individual
list item, <li> receives a bullet beside
it. The order of the tags must be:
<ul><li>.</li><li>.</li></ul>
43
Additional Elements
The ordered list displays numbers to
distinguish list items. For ordered lists,
the <ol> element tells the document
that each individual list item, receives a
number beside it. The browser
automatically orders the list for you.
Correctly nesting tags is again
mandatory, the <li>..</li> tags
must be between <ol> and </ol>. 44
Additional Elements
For definition lists, the <dl> element
tells the document that each individual
definition term <dt> and its associated
definition (meaning) <dd> will be
formatted so that the definition term is
left-aligned and the definition meaning
follows, indented, on the subsequent
line.
45
XHTML Core Attributes

Attributes allow specific identification
to elements for the purpose of data
manipulation and style formats
Attributes are placed in the start tag
Attributes must have a quoted value
Avoid line breaks or multiple
whitespace characters within attribute
values
46

XHTML universal attributes include id,
class, style, and title.
47

The id attribute identifies a unique
name for a tag in a document. Its value
must be unique in the document or the
parser will throw an error.
<pid=intro">Introduction:
NewProductPresentation</p>
48

The class attribute identifies a class
or classes a tag may belong to. A class,
in this context, is similar to a category
or group. As such, more than one
element may have the same class
name. If style is applied to that
particular class, all elements
(regardless of type) will receive the
same style attribute.
49

<pid=introParagraph"
class=largeGroup">Introduction:
NewProductPresentation</p>
<pid=overviewProduct"
class=largeGroup">Developmentand
MarketingStrategy</p>
50

The style attribute is to add style
sheet information directly to a tag. The
separation of style from within a
document to linked to another
document better allows for browser
adaptability of new technologies.
<pstyle="fontsize:
24pt">NewProductTradeShow
Schedule</p>
51

The title attribute provides
descriptive information about a tag or
its contents. The title attribute works
in IE4.0 and above to display advisory
text in the form of a tool tip, providing
additional information to the user.
<ptitle="OrderNowforFree
Shipping">NewProductsAvailable
Now</p>
52
Element Attributes
Non-empty and empty elements may
add attributes, although attributes and
values related to style are, for the most
part, deprecated and you will use
Cascading Style Sheets (CSS) to
format your documents.
53
The Syntax for Non-Empty

Elements is:
<elementnameoption1="value1"
option2="value2">
</elementname>
54
The Syntax for Empty Elements is:

<elementnameoption1="value1"
option2="value2"/>
55
Quotation Marks/Quotes
In XHTML, every attribute value must
be surrounded by quotation marks or
single quotes of the same type. A value
beginning with a quotation mark must
end with a quotation mark, and a value
beginning with a single quote must end
with a single quote.
56
XHTML
XHTML does not allow any kind of
abbreviation of an attribute and its
value. The full attribute name and the
full value, in quotation marks, must be
available for the parser.
57
<a>
The anchor element is the most
common way to specify a hyperlink.
Anchor content may include text,
images, or both.
<ahref="yourGraphic.gif">
textgoeshere</a>
58
<img>
To insert an image into a web page,
use the <img> element and set the
src attribute of the element equal to
the URL of the image. An example of
<img> with a relative URL is:
<imgsrc="newProduct.gif"/>
59
An Absolute URL
An absolute URL may be used to
reference an image on another server.
<imgsrc="http://www.New.com
/images/logo.gif"/>
60
<a> and <img>

Images are valid content as the target for
<a>. An image URL substitutes for the
text portion of the link.
<a
href="mailto:name@website.com">
..<imgsrc="mailbox.gif
/></a>
61
Text and an Image

You can have text and an image in the
same link.
<a
href="http://www.dynamiclearn
ing.org/index.html"><img
src="dyn.gif"/>Dynamic
LearningResourceSite</a>
62
<br/>
To insert returns or blank lines in a
document, use the break element.
<br/> contains no content and has
no end tag.
<body>
<p>NewTechnologies,
Inc.<br/></p>
</body>
63
Using XHTML <br/> might need to be

enclosed in <p> as in:
<p><br/></p> in order to validate
64
<div>
To structure XHTML documents into
unique sections or divisions. <div>
has been used in the past to identify
sections of text for alignment. You will
use <div> for identifying sections of
text for formatting or positioning with
style sheets.
65
<div>
<div> acts much like <p>, except it
marks a section rather than an
individual paragraph.
<div>
<p>Asectionoftextiskeyed
inforlater
manipulation.</p>
</div>
66
<span>
span is similar to <div>, except it
identifies content inline. As an inline
element, span doesn't make use of the
alignment attribute.
<p>The<span>NewProduct
Line</span>isnow
available.</p>
67
<span>
or
<p>The<spanclass="Q2AD">New
ProductLine</span>willbe
availablenationwidewithin
thequarter.</p>
68
Differences between XHTML 1.1

(including its subset XHTML Basic 1.0)
and HTML 4 and XHTML 1.0:

Removal of the deprecated tags
results in an increase in structural
functionality, but relies on style sheets
for presentation. HTML 4 tags such as
<center> are deprecated.
On every element, the lang attribute
has been replaced in favor of xml:
lang
69
Differences between XHTML 1.1

(including its subset XHTML Basic 1.0)
and HTML 4 and XHTML 1.0:

On <a> and <map> the name attribute
has been removed and replaced with
the id attribute
The "ruby" collection of elements has
been added
70
XHTML Tables
Tables represent the relationship of
data. XHTML tables are constructed
row by row.
<table> defines the entire table and
is the root table element. The
remaining elements are child elements
of table.
71
XHTML Tables
<caption> specifies the title of a table
and is presented above, below, to the
left, or to the right of the table.
caption is an optional element,
although it must be the first element
after the <table> start tag. A table
may only contain one caption element.
72
XHTML Tables
<td> (table data) the non-heading child
element of <tr> defines a single data
cell nested within a table row.
Except for the boldface, <td> is
identical to <th>.
73
XHTML Tables
A caption element provides a short
description of the purpose of the table.
A summary attribute provides a longer
description of the tables purpose and
structure.
<tablesummary="Summaries
assistnonvisualoutputand
alternatedevices.">
74
XHTML Tables
Table rows are grouped into head
<thead>, foot <tfoot>, and body
<tbody> sections. <thead> and
<tfoot> contain information
describing the tables columns.
<tfoot> must appear before
<tbody> because <tfoot> is
rendered before receiving all of the
rows of data.
75
XHTML Tables
<thead> contains the rows <tr>,
headings <th>, and cells <td> that
make up the head of the table.
<tfoot> contains the rows <tr>,
headings <th>, and cells <td> that
make up the foot of the table.
76
XHTML Tables
<tbody> contains rows of table data,
<thead>, <tfoot>, and <tbody>
sections must contain the same
number of columns.
Each <thead>, <tfoot>, and
<tbody> contains a row group. Each
row group begins with a <tr> element.
<tr> marks the beginning of a row of
cell definitions.
77
<table>
<caption>Placementofthead,tfoot,
tr</caption>
<thead>
<tr><th>Thedataforthetablehead
goeshere</th></tr></thead>
<tbody><tr><td>tddoesnotautomatically
bold,thdoesbold.trisneededtobegin
anewrow</td></tr></tbody>
<tfoot>
78
<tr><th>Thedataforthetablefootis
keyedbeforethetablebody,yetrenders
afterthetablebody</th></
tr></tfoot>
<tbody>
<tr><td/>Thisiswherethetabledata
goes,therecanbeanunlimitednumberof
tablerows</td></tr>
<tr><td>Therecanalsobemorethanone
tablebodyinatable,althoughonlyone
theadortfoot</td></tr>
</tbody>
</table>
79
XHTML Tables
The beginning of each row is marked
with <tr>. Two types of cell tags are
used in a table, <th> a header cell and
<td> a data cell. Cells may span more
than one row and column.
<th> defines a cell containing header
information. <td> defines a cell that
contains data.
80
Table Cell Attributes

rowspan and colspan attributes
appear to combine adjacent cells into
larger cells. One cell will appear to
span more than one row or column.
Adjacent cells are hidden.
81
Table Cell Attributes
<tdcolspan="6">..</td>
<tdrowspan="3">..</td>or
<tdrowspan="numberRows"
colspan="numberColumns">..</td>
82
XHTML Forms
The XHTML Strict DTD supports a core
group of form elements that will
transition toward X-Forms.
The XHTML Transitional DTD supports
HTML 4.0 form elements, although
some have been deprecated.
83
XHTML Forms
XHTML Modularization supports a
Forms Module of form elements
broader than the XHTML Strict DTD.
XHTML Modularization also acts as a
parent set for XHTML Basic Forms, a
short simple set of forms elements for
wireless and other portable devices.
84
XHTML Forms
X-Forms, when implemented, will act
as a parent set for X-Forms Simple, a
simple interface approach to X-Forms.
This will allow a more complex
approach to forms by developers,
X-Forms, as well as a less complex
approach, X-Forms Simple for nondevelopers.
85
XHTML Forms
All XHTML forms begin with the form
element which defines the form.
<form
action="yourEmail@dns.com"
method="post">
Starts the form and connects it to the
resource at the indicated URL.
86
XHTML Forms
A form collects data, it does not
process data. The form sends the
gathered data to a program on a
server, or interacts with a server using
a script program. The form element
contains a method attribute. method
tells the browser what method to
employ to send the information to the
server.
87
XHTML Forms
<inputtype="text"
name="accountnumber"
id="accountnumber">
In this example, a textbox is created to
allow text to be keyed in. The text box
is named account number (you must
name <input> to transmit to a
server).
88
XHTML Forms
<inputtype="submit">
The second input element creates a
button that will submit the information
in the form back to the server.
89
Form Controls
Within the form element form controls can be
created such as:
textboxes, password boxes, and text-area
boxes
command buttons, radio buttons, and
checkboxes, and buttons with images
list boxes
dropdown boxes
90
Form Controls
As an example, to create a checkbox,
use the control type:
<inputtype="checkbox"
name="prefix">
91
Developing Forms
Developing forms is, for the most part, a 3step process.
The first, and most important step, is to plan
the information to be gathered, prioritize the
information in the design of the form, and
edit out any information that isnt important.
You have a short user attention span with
forms, make the most of getting the data you
need.
92
Developing Forms
The second step is to determine
which elements and their attributes
best allow you to request information
from a user.
The third step is to plan and code the
forms interface and the data transfer
to the server and the end client.
93
Form Elements
<fieldset>..</fieldset>
fieldset groups together a set of
related form input mechanisms,
enabling them to be formatted and
labeled as a group.
94
Form Elements
<form>..</form>
form holds the content of the fill-in
form, as defined by the input
elements that can appear inside of a
form. Forms do not nest, there can be
no form within a form.
95
Form Elements
<input>..</input>
input specifies editable fields and is only
allowed inside a form. input takes a type
attribute to define the type of input
mechanism desired, a name attribute, to
define the variable name associated with
the input data, and other attributes to set
size and alignment.
96
Form Elements
<label>..</label>
label defines a label for a specified
input element. The for attribute of
the label defines the relationship
between a label and an input. The
for attribute takes as its value the id
value of the input element.
97
XHTML
Extensible Markup Language
Last Slide
98

XHTML Extensible Markup Language

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

XHTML Extensible Markup Language

Uploaded by

Copyright:

Available Formats

XHTML

Extensible Markup Language

XHTML 1.1 Modularization

XHTML Basic 1.0

Three Basic Levels to the Structure

Three Basic Levels to the Structure

Three Basic Levels to the Structure

The Head Element

XHTML and XML

The XML Declaration

The DOCTYPE Declaration

The XHTML 1.0 Strict DTD

The XHTML 1.0 Transitional DTD

The XHTML 1.0 Frameset DTD

The XHTML 1.1 Modularization DTD

The XHTML Basic 1.0 DTD

The Root Element

The Root Element

The Root Element for XHTML is:

The Syntax for the XHTML

XHTML Core Attributes

XHTML Core Attributes

XHTML Core Attributes

XHTML Core Attributes

XHTML Core Attributes

XHTML Core Attributes

XHTML Core Attributes

The Syntax for Non-Empty

The Syntax for Empty Elements is:

<a> and <img>

Text and an Image

Using XHTML <br/> might need to be

Differences between XHTML 1.1

and HTML 4 and XHTML 1.0:

Differences between XHTML 1.1

and HTML 4 and XHTML 1.0:

Table Cell Attributes

Table Cell Attributes

You might also like