L2 - XHTML 1

INTRODUCTION TO
XHTML
HTML and XHTML

2
HTML: Hyper-Text Markup Language: the

foundation of the World-Wide Web.
Platform
independence: pages can be viewed

using a variety of different computers and
browsers.
Convenient linking from one page to another
(hypertext).
XHTML:
Extensible Hyper-Text Markup Language.
Based on HTML.
Editing XHTML
3
XHTML documents
Source-code
form
Text editor (e.g. Notepad)
.html or .htm file-name extension
Web server
Stores
Web
XHTML documents
browser
Requests
XHTML documents
First XHTML Example

4
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5


7
8
9
10
11
<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title>Internet and WWW How to Program - Welcome</title>
</head>
12
13
14
15
<body>
main.html
(1 of 1)
Welcome to XHTML!
</body>
16 </html>
Tag
5
A tag is a tag-name enclosed in angle brackets.
Tags usually come in pairs: an opening tag

and a closing tag, which is the same tag-name
preceded by a slash.
<tag-name>Content affected by tag</tag-name>
Opening Tag
ClosingTag
Tags for Document Structure

6
Some tags specify the overall structure of the

document:
<html> ... </html> encloses the entire document.
<head> ... </head> encloses the head portion of the

document.
Title of the document.
Style sheets and scripts.
<body> ... </body> encloses the body portion of the
document.
Pages content the browser displays.
First XHTML Example

7
XHTML comments
Start
with 
Paragraph

paragraph text 
Nesting of tags
8
Opening and closing tags define regions

affected by the tags. These regions must
nest, not overlap.
Correct:
<tag1>Some text <tag2>more text</tag2> and more.</tag1>
Wrong:
<tag1>Some text <tag2>more text</tag1> and more.</tag2>
Rules about Tags

9
Not all tags need closing tag
For some tags, a closing tag is optional:

 paragraph. Implies closing of previous paragraph tag.
Thus, the closing tag is optional but recommended,
especially if the tag contains attributes.
For some tags, a closing tag is never used:

 line break. Marks a location, not a region.
Tag names are case-insensitive

 and and are all equivalent.
Rules about Tags

10
Unknown tags are ignored.
This rule allows new tags to be introduced

without causing problems for older browsers.
But it also means you need to be careful to

spell tag names correctly!
Tags with attributes

11
Some tags can be qualified by attributes that

provide needed additional information or
change the default properties of the tag.
Attributes are specified within the angle brackets

following the opening tag name.
Attributes are never listed in a closing tag.
<tag-name attribute="value attribute="value">Content text </tag-name>
Element
Tag
Property
Attribute
W3C XHTML Validation Service

12
Validation service ( validator.w3.org )

Checking
a documents syntax
URL
that specifies the location of the file

Uploading a file to the site
validator.w3.org/file-upload.html

13

14
Headers
15
Six headers ( header elements)

h1
through h6
4
5


7
8
9
10
11

<head>
<title>Internet and WWW How to Program - Headers</title>
</head>
12
13
<body>
14
15
<h1>Level 1 Header</h1>
16
<h2>Level 2 header</h2>
17
18
19
20
21
22
</body>
23 </html>
16
17
Images
18
Three most popular formats
Graphics Interchange Format (GIF).

Joint Photographic Experts Group (JPEG).
Portable Network Graphics (PNG).
There is no closing tag.

img element
src attribute
Specifies the location of the image file

width and height attributes
Alt attribute
Images: example
19
1
4
5


7
8
9
10
11

<head>
</head>
12
13
<body>
14
15

<img src = "xmlhtp.jpg" height = "238" width = "183"
16
alt = "XML How to Program book cover" />
17
<img src = "jhtp.jpg" height = "238" width = "183"
18
alt = "Java How to Program book cover" />
19
20

21
</body>
22 </html>
Images: example
20
1
4
5


7
8
9
10
11

<head>
</head>
12
13
<body>
14
15

<img src = "xmlhtp.jpg" height = "238" width = "183"
16
alt = "XML How to Program book cover" />
17
<img src = "jhtp.jpg" height = "238" width = "183"
18
alt = "Java How to Program book cover" />
19
20

21
</body>
22 </html>
Images: example
21
Linking
22
Hyperlink
References
other sources such as XHTML

documents and images.
Both text and images can act as hyperlinks.
Created using the <a> (anchor) tag
Attribute href
Specifies the location of a linked resource.

Link to e-mail addresses using mailto: URL.
23


7
8
9
10
11

<head>
<title>Internet and WWW How to Program - Links</title>
</head>
12
13
<body>
14
15
<h1>Here are my favorite sites</h1>
16
17
Click a name to go to that page.
18
19

20
<a href = "http://www.deitel.com">Deitel</a>
21
22
<a href = "http://www.prenhall.com">Prentice Hall</a>
23
24
25
<a href = "http://www.yahoo.com">Yahoo!</a>
26
<a href = "http://www.usatoday.com">USA Today</a>
27
28
</body>
29 </html>
24
25


7
8
9
10
11

<head>
<title>Internet and WWW How to Program - Contact Page</title>
</head>
12
13
<body>
14
15

16
My email address is
17
<a href = "mailto:deitel@deitel.com">

deitel@deitel.com
18
19
</a>
20
. Click the address and your browser will
21
open an e-mail message and address it to me.
22

23
</body>
24 </html>
26
Image as a hyperlink
27
Nested tags.
<a> <img ..../> </a>
4
5


7
8
9

<head>
10
<title>Internet and WWW How to Program - Navigation Bar
11
</title>
12
</head>
13
14
<body>
15
16
17
18
19
20

<a href = "links.html">
<img src = "buttons/links.jpg" width = "65"
height = "50" alt = "Links Page" />
</a> 
21
22
23
24
25
28
<a href = "list.html">

<img src = "buttons/list.jpg" width = "65"
height = "50" alt = "List Example Page" />
</a> 
26
<a href = "contact.html">
27
<img src = "buttons/contact.jpg" width = "65"
28
height = "50" alt = "Contact Page" />
29
</a> 
30
31
<a href = "header.html">
32
<img src = "buttons/header.jpg" width = "65"
33
height = "50" alt = "Header Page" />
34
</a> 
35
36
<a href = "table1.html">
37
<img src = "buttons/table.jpg" width = "65"
38
height = "50" alt = "Table Page" />
39
</a> 
40
41
<a href = "form.html">
42
<img src = "buttons/form.jpg" width = "65"
43
height = "50" alt = "Feedback Form" />
44
</a> 
45
46

47
48
</body>
49 </html>
29
30
31
Special Characters and More Line

Breaks
Character entity references (in the form &code;)

Numeric character references (e.g. &)
del
sup
Superscript text
sub
Strikethrough text:
Subscript text
<hr />
Horizontal rule (horizontal line)
4
5


7
8
9

<head>
10
<title>Internet and WWW How to Program - Contact Page
11
</title>
12
</head>
13
14
<body>
15
16

17

19
Click
20
<a href = "mailto:deitel@deitel.com">here
21
</a> to open an e-mail message addressed to
22
deitel@deitel.com.
23

24
25
32
<hr /> 
26
27
All information on this site is ©

Deitel & Associates, Inc. 2002.
28
29
30

31

32

33

34
<del>You may download 3.14 x 102
35
characters worth of information from this site.</del>
36
Only one download per hour is permitted.
37
38
Note: < ¼ of the information

presented here is updated daily.
39
40
41
</body>
42 </html>
33
34
Unordered Lists
35
Unordered list element ul

Creates
a list in which each item begins with a

bullet symbol
li (list item)
Entry
in an unordered list
4
5


7
8
9
10
11

<head>
<title>Internet and WWW How to Program - Links</title>
</head>
12
13
<body>
14
15
<h1>Here are my favorite sites</h1>
16
17
Click on a name to go to that page.
18
19

20
<ul>
21
22

23
<li><a href = "http://www.deitel.com">Deitel</a></li>
24
25
36
<li><a href = "http://www.w3.org">W3C</a></li>
26
<li><a href = "http://www.yahoo.com">Yahoo!</a></li>
27
28
<li><a href = "http://www.cnn.com">CNN</a></li>
29
</ul>
30
31
</body>
32 </html>
37
Nested and Ordered Lists

38
Represent hierarchical relationships

Ordered lists (ol)
Creates
number
a list in which each item begins with a
4
5


7
8
9
10
11

<head>
<title>Internet and WWW How to Program - Lists</title>
</head>
12
13
<body>
14
15
<h1>The Best Features of the Internet</h1>
16
17

18
<ul>
19
20
21
22
23
39
<li>You can meet new people from countries around

the world.</li>
<li>
You have access to new media as it becomes public:
24

25

26

33
<ol>
34
<li>For business</li>
35
<li>For pleasure</li>
36
37
</ol>
</li>
38
39
<li>Around the clock news</li>
40
<li>Search engines</li>
41
<li>Shopping</li>
42
<li>
43
Programming
44
40
45

46
<ol>
47
<li>XML</li>
48
<li>Java</li>
-->
49
<li>XHTML</li>
50
<li>Scripts</li>
51
<li>New languages</li>
</ol>
52
53
</li>
54
55
</ul> 
56
</li>
57
58
59
<li>Links</li>
60
<li>Keeping in touch with old friends</li>
61
<li>It is the technology of the future!</li>
62
63
</ul>
64
65
</body>
66 </html>
41

42
Lists
43
type attribute:
Ordered
list:
1:
1, 2, 3, ..
a: a, b, c, ..
A: A, B, C, ..
i: i, ii, iii, ..
I: I, II, III, ..
Unordered
Circle
square
disc
list:
o gg
gg
gg
Tags for Style

44
Explicit style tags

Boldfaced text
Italicized text
Underlined text
<tt>Typewriter-font text</tt>
Logical style tags

Prominent text - usually bold
Emphasized text - usually italics
<cite>Cited text</cite> - usually italicized
<code>Computer code</code> - usually in typewriter
font
Special characters
45
Some characters such as angle brackets are

reserved for special meanings in HTML. Others
are not available on many keyboards. These
characters can be put into content using codes
between ampersand and semicolon:
< - the less-than symbol < (left angle bracket)
> - the greater-than symbol > (right angle bracket)
& - the ampersand sign &
© - the copyright symbol
Many more are defined. Note that unlike tags,

these codes are case-sensitive.
Organizational Tags
46
Paragraphs and Layout

<center>Centered text</center>
- changes the justification of the enclosed text
(normally left-justified) to centered.
<blockquote>Quoted text</blockquote>
- for large blocks of quoted material.
Other HTML tags

47
Horizontal rule (line): use <hr>.

It
always appears on a line by itself.
This tag takes an optional attribute width

such as <hr width="50%"> to control how
far across the page it extends.
For more HTML tags and attributes, see HTML

reference sheet.

L2 - XHTML 1

Uploaded by

Document Information

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

L2 - XHTML 1

Uploaded by

Copyright:

Available Formats

INTRODUCTION TO

HTML and XHTML

HTML: Hyper-Text Markup Language: the

independence: pages can be viewed

First XHTML Example

<?xml version = "1.0"?>

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

<!-- Our first Web page

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

A tag is a tag-name enclosed in angle brackets.

Tags usually come in pairs: an opening tag

<tag-name>Content affected by tag</tag-name>

Tags for Document Structure

Some tags specify the overall structure of the

<head> ... </head> encloses the head portion of the

First XHTML Example

with

paragraph text </p>

Opening and closing tags define regions

<tag1>Some text <tag2>more text</tag2> and more.</tag1>

<tag1>Some text <tag2>more text</tag1> and more.</tag2>

Rules about Tags

Not all tags need closing tag

For some tags, a closing tag is optional:

For some tags, a closing tag is never used:

Tag names are case-insensitive

Rules about Tags

Unknown tags are ignored.

This rule allows new tags to be introduced

But it also means you need to be careful to

Tags with attributes

Some tags can be qualified by attributes that

Attributes are specified within the angle brackets

Attributes are never listed in a closing tag.

<tag-name attribute="value attribute="value">Content text </tag-name>

W3C XHTML Validation Service

Validation service ( validator.w3.org )

that specifies the location of the file

W3C XHTML Validation Service

W3C XHTML Validation Service

Six headers ( header elements)

<?xml version = "1.0"?>

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

<!-- XHTML headers

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

Three most popular formats

Graphics Interchange Format (GIF).

There is no closing tag.

Specifies the location of the image file

<?xml version = "1.0"?>

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

<!-- Fig. 4.7: picture.html

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

alt = "XML How to Program book cover" />

<img src = "jhtp.jpg" height = "238" width = "183"

alt = "Java How to Program book cover" />

<?xml version = "1.0"?>

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

<!-- Fig. 4.7: picture.html

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

<p>All information on this site is <strong>©</strong>

<p>Note: <strong>< ¼</strong> of the information