XHTML

XHTML
Outline Introduction Editing XHTML First XHTML Example W3C XHTML Validation Service Headers Linking Images Special Characters and More Line Breaks Unordered Lists Nested and Ordered Lists Web Resources
Objectives
In this chapter, you will learn:
To understand important components of XHTML documents. To use XHTML to create Web pages. To be able to add images to Web pages. To understand how to create and use hyperlinks to navigate Web pages. To be able to mark up lists of information.
What Is XHTML?
XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version of HTML 4.01 XHTML is HTML defined as an XML application XHTML is supported by all major browsers.
4.1 Introduction
Extensible HyperText Markup Language
XHTML A markup language Separation of the presentation of a document from the structure of the documents information Based on HTML
Technology of the World Wide Web Consortium (W3C)
4.2 Editing XHTML

XHTML documents
Source-code form Text editor (e.g. Notepad, Wordpad, emacs, etc.) .html or .htm file-name extension Web server
Stores XHTML documents
Web browser
Requests XHTML documents
Why XHTML?
Many pages on the internet contain "bad" HTML. 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> <h1>Bad HTML <p>This is a paragraph </body> XML is a markup language where documents must be marked up correctly and "well-formed". Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret a "bad" markup language. Therefore - by combining the strengths of HTML and XML, XHTML was developed. XHTML is HTML redesigned as XML.
The most important differences from HTML:

Document Structure
XHTML DOCTYPE is mandatory The XML namespace attribute in <html> is mandatory <html>, <head>, <title>, and <body> is mandatory
XHTML Elements
XHTML elements must be properly nested XHTML elements must always be closed XHTML elements must be in lowercase XHTML documents must have one root element
XHTML Attributes
Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden
<!DOCTYPE ....> Is Mandatory

An XHTML document must have an XHTML DOCTYPE declaration. A complete list of all the XHTML Doctypes is found in our HTML Tags Reference. The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html>, must specify the xml namespace for the document. The example below shows an XHTML document with a minimum of required tags: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Title of document</title> </head> <body> ...... </body> </html>
XHTML Elements Must Always Be Closed This is wrong: <p>This is a paragraph <p>This is another paragraph This is correct: <p>This is a paragraph</p> <p>This is another paragraph</p> Empty Elements Must Also Be Closed This is wrong: A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face"> This is correct: A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" /> XHTML Elements Must Be In Lower Case
Attribute Names Must Be In Lower Case This is wrong:<table WIDTH="100%"> This is correct:<table width="100%"> Attribute Values Must Be Quoted This is wrong:<table width=100%> This is correct:<table width="100%"> Attribute Minimization Is Forbidden This is wrong:<input checked> <input readonly> <input disabled> <option selected> This is correct:<input checked="checked"> <input readonly="readonly"> <input disabled="disabled"> <option selected="selected">
How to Convert from HTML to XHTML?

Add an XHTML <!DOCTYPE> to the first line of every page Add an xmlns attribute to the html element of every page Change all element names to lowercase Close all empty elements Change all attribute names to lowercase Quote all attribute values
First XHTML Example

XHTML comments
Start with  html element
head element Head section Title of the document Style sheets and scripts body element Body section Pages content the browser displays
Start tag
attributes
(provide additional information about an element)

name and value (separated by an equal sign)
End tag
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> </head> <body> </body> <title>Internet and WWW How to Program - Welcome</title>
main.html (1 of 1)
<p>Welcome to XHTML!</p>
16 </html>
W3C XHTML Validation Service

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
Put your web address in the box below: http://www.w3schools.com/html/demo_xhtml.asp
Images
Three most popular formats
Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG) img element
src attribute
Specifies the location of the image file
width and height
Pixels (picture elements) Empty elements

Terminated by character / inside the closing right angle bracket (>), or by explicitly including the end tag
br element
Line break
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 4 5  6  7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 10 11 12 13 14 15 16 17 18 19 20 21 </p> </body> <p> <img src = "xmlhtp.jpg" height = "238" width = "183" alt = "XML How to Program book cover" /> <img src = "jhtp.jpg" height = "238" width = "183" alt = "Java How to Program book cover" /> <body> <head> </head> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<title>Internet and WWW How to Program - Welcome</title>
picture.html (1 of 1)
22 </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> </title> </head> <body> <p> <a href = "links.html"> <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /> </a><br /> <a href = "list.html"> <img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page" /> </a><br /> <title>Internet and WWW How to Program - Navigation Bar
nav.html (1 of 2)
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 </body> 49 </html> </p> <a href = "form.html"> <img src = "buttons/form.jpg" width = "65" height = "50" alt = "Feedback Form" /> </a><br /> <a href = "table1.html"> <a href = "header.html"> <img src = "buttons/header.jpg" width = "65" height = "50" alt = "Header Page" /> </a><br /> <a href = "contact.html"> <img src = "buttons/contact.jpg" width = "65" height = "50" alt = "Contact Page" /> </a><br />
<img src = "buttons/table.jpg" width = "65" height = "50" alt = "Table Page" /> </a><br />
nav.html (2 of 2)
Basic XHTML Forms

Element form
Attribute method
Specifies how the forms data is sent to Web server method = post
Appends form data to the browser request
method = get
Appends form data directly to the end of the URL
Attribute action
Specifies the URL of a script on the Web server
input
Specifies data to provide to the script that processes the form
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
<p>   <p><label>Name: --> <input type = "hidden" name = "recipient"
<input name = "name" type = "text" size = "25" maxlength = "30" /> </label></p> <p>  --> -->
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Forms</title> </head> <body> <h1>Feedback Form</h1>
form.html (1 of 3)
--> -->
<p>Please fill out this form to help us improve our site.</p>  <form method = "post" action = "/cgi-bin/formmail">
51 52 53 54 </body> 55 </html> </form>
form.html (3 of 3)
5.6 Internal Linking

Enables the user to jump between locations in the same document
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - List</title> </head> <body>
 <h1 id = "features">The Best Features of the Internet</h1>  <p><a href = "#bugs">Go to <em>Favorite Bugs</em></a></p> <ul> <li>You can meet people from countries around the world.</li> <li>You have access to new media as it becomes public:
links.html (1 of 3)
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
<ul> <li>New games</li> <li>New applications <ul> <li>For Business</li> <li>For Pleasure</li> </ul> </li> <li>Around the clock news</li> <li>Search Engines</li> <li>Shopping</li> <li>Programming <ul> <li>XHTML</li> <li>Java</li> <li>Dynamic HTML</li> <li>Scripts</li> <li>New languages</li> </ul> </li> </ul> </li> <li>Links</li>
links.html (2 of 3)
51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
<li>Keeping in touch with old friends</li> <li>It is the technology of the future!</li> </ul>  <h1 id = "bugs">My 3 Favorite Bugs</h1> <p>  <a href = "#features">Go to <em>Favorite Features</em> </a></p> <ol> <li>Fire Fly</li> <li>Gal Ant</li> <li>Roman Tic</li> </ol> </body>
links.html (3 of 3)
71 </html>
Creating and Using Image Maps

Designate certain areas of an image (called hotspots) as links
Element map
Attribute id
Identifies the image map
Element area
Defines hotspot Attribute shape and coords Specify the hotspots shape and coordinates Rectangular ( shape = rect ) Polygon ( shape = poly ) Circle ( shape = circle )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<?xml version = "1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Internet and WWW How to Program - Image Map </title> </head> <body> <p>  <map id = "picture">  -->

25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
<area href = "form.html" shape = "rect" coords = "2,123,54,143" alt = "Go to the feedback form" /> <area href = "contact.html" shape = "rect" coords = "126,122,198,143" alt = "Go to the contact page" /> <area href = "main.html" shape = "rect" coords = "3,7,61,25" alt = "Go to the homepage" /> <area href = "links.html" shape = "rect" coords = "168,5,197,25" alt = "Go to the links page" />
  <area shape = "poly" alt = "E-mail the Deitels" href = "mailto:deitel@deitel.com" />   <area href = "mailto:deitel@deitel.com" shape = "circle" coords = "100,36,33" alt = "E-mail the Deitels" /> </map>
coords = "162,25,154,39,158,54,169,51,183,39,161,26"
50 51 52 53 54 55
 
56 </html>
frameset Element
Allow browser display more than one document simultaneously
Element frameset
Attribute cols
Specifies the framesets column layout
Attribute rows
Specifies the number of rows and the size of each row
Element frame
Specifies the documents that will be loaded Attribute src Specifies URL of the page to display
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Main</title> <meta name = "keywords" content = "Webpage, design, XHTML, tutorial, personal, help, index, form,
contact, feedback, list, links, frame, deitel" />
<meta name = "description" content = "This Web site will through the use of interactive examples and instruction." /> </head> 
index.html (1 of 2)
help you learn the basics of XHTML and Web page design
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
  <frame name = "leftframe" src = "nav.html" /> <frame name = "main" src = "main.html" /> <noframes> <body> <p>This page uses frames, but your browser does not support them.</p> <p>Please, <a href = "nav.html">follow this link to browse our site without frames</a>.</p> </body> </noframes> </frameset>
index.html (2 of 2)
41 </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Navigation Bar </title> </head> <body> <p> <a href = "links.html" target = "main"> <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /> </a><br /> <a href = "list.html" target = "main"> <img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page" />
nav.html (1 of 2)
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
</a><br /> <a href = "contact.html" target = "main"> <img src = "buttons/contact.jpg" width = "65" height = "50" alt = "Contact Page" /> </a><br /> <a href = "header.html" target = "main"> <img src = "buttons/header.jpg" width = "65" height = "50" alt = "Header Page" /> </a><br />
<a href = "table1.html" target = "main">
<img src = "buttons/table.jpg" width = "65" height = "50" alt = "Table Page" /> </a><br /> <a href = "form.html" target = "main"> <img src = "buttons/form.jpg" width = "65" height = "50" alt = "Feedback Form" /> </a><br /> </p> </body>
nav.html (2 of 2)
50 </html>
Web Resources
www.vbxml.com/xhtml/articles/xhtml_tables www.webreference.com/xml/reference/xhtml. html

XHTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

XHTML

Enviado por

Direitos autorais:

Formatos disponíveis

XHTML

4.2 Editing XHTML

The most important differences from HTML:

<!DOCTYPE ....> Is Mandatory

How to Convert from HTML to XHTML?

First XHTML Example

(provide additional information about an element)

W3C XHTML Validation Service

Put your web address in the box below: http://www.w3schools.com/html/demo_xhtml.asp

W3C XHTML Validation Service

W3C XHTML Validation Service

width and height

Pixels (picture elements) Empty elements

<title>Internet and WWW How to Program - Welcome</title>

Basic XHTML Forms

51 52 53 54 </body> 55 </html> </form>

5.6 Internal Linking

Creating and Using Image Maps

contact, feedback, list, links, frame, deitel" />

<a href = "table1.html" target = "main">

Você também pode gostar