1 / 11

XHTML Basics

XHTML Basics. What is XHTML?. XHTML is newer than the old HTML XHTML has stricter rules and does not allow some elements formerly used in HTML One benefit of using XHTML is that it helps make web pages look identical in different browsers, such as Internet Explorer, Firefox, Safari, etc.

vian
Download Presentation

XHTML Basics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. XHTML Basics

  2. What is XHTML? • XHTML is newer than the old HTML • XHTML has stricter rules and does not allow some elements formerly used in HTML • One benefit of using XHTML is that it helps make web pages look identical in different browsers, such as Internet Explorer, Firefox, Safari, etc. • XHTML is used to define and organize the page content but not to format or style it.

  3. A basic XHTML document: <!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" xml:lang="en" lang="en"> <head> <title>My First Web Page</title> </head> <body> <p>Hello World</p> </body> </html>

  4. DOCTYPE must be specified on the first line: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> The DOCTYPE tells the web browser which language is being used for the set of instructions that follow. In this class, we will be using XHTML Transitional, which allows us more flexibility than XHTML Strict.

  5. In XHTML, all elements must be in lowercase (the DOCTYPE line is not an element.) <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>My First Web Page</title> </head> <body> <p>Hello World</p> </body> </html>

  6. Each element must have a beginning and an end: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>My First Web Page</title> </head> <body> <p>Hello World</p> </body> </html>

  7. Elements must be properly nested: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>My First Web Page</title> </head> <body> <p>Hello World</p> </body> </html>

  8. What is wrong with this? <h1>My Favorite Things</h1> <ul> <li>Brown <p> paper packages</li> Tied up with strings</p> </ul>

  9. What is wrong with this? <h1>My Favorite Things</h1> <ul> <li>Brown <p> paper packages</li> Tied up with strings</p> </ul> The tags are overlapped.

  10. White space doesn’t matter. The browser will ignore blank lines and multiple spaces: <ul> <li>First Item</li><li>Second Item</li> </ul> is thesame as: <ul> <li>First Item</li> <li>Second Item</li> </ul> We can take advantage of this fact by putting blank lines and indents in our code to make it easier to organize and read.

  11. Summary of XHTML Basics: • DOCTYPE must be specified first. • All elements must be in lowercase. • Each element must have a beginning and an end. • Elements must be properly nested. • White space doesn’t matter.

More Related