Learning XHTML Basics and Differences with HTML
"Explore the essentials of XHTML, from understanding its components to creating web pages, adding images, creating hyperlinks, marking up information, designing tables, developing forms, and enhancing accessibility for search engines. Discover the distinctions between HTML and XHTML and their respective features and applications."
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
OBJECTIVES In this chapter you will learn: To understand important components of XHTML documents. To use XHTML to create web pages. To add images to web pages. To create and use hyperlinks to navigate web pages. To mark up lists of information. To create tables with rows and columns of data and control table formatting. To create and use forms to get user input. To make web pages accessible to search engines using <meta> <meta> tags.
HTML vs XHTML HTML or HyperText Markup Language is the main markup language for creating web pages and other information that can be displayed in a web browser. XHTML (Extensible HyperText Markup Language) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which web pages are written.
HTML XHTML Filename extension Internet media type Developed by Type of format Extended from Stands for .html, .htm text/html W3C & WHATWG Document file format SGML HyperText Markup Language .xhtml, .xht, .xml, .html, .htm application/xhtml+xml World Wide Web Consortium Markup language XML, HTML Extensible HyperText Markup Language Application Application of Standard Generalized Markup Language (SGML). Web pages are written in HTML. Extended version of HTML that is stricter and XML-based. Flexible framework requiring lenient HTML specific parser. be parsed with standard XML parsers. Application of XML Function Nature Restrictive subset of XML and needs to Origin Proposed by Tim Berners-Lee in 1987. HTML 2, HTML 3.2, HTML 4.0, HTML 5. World Wide Web Consortium Recommendation in 2000. XHTML 1, XHTML 1.1, XHTML 2, XHTML 5. Versions
Introduction XHTML (Extensible HyperText Markup Language) markup language for creating web pages Based on HTML (HyperText Markup Language) legacy technology of the World Wide Web Consortium (W3C) XHTML 1.0 Allows only a document s content and structure to appear in a valid XHTML document, and not its formatting Formatting is specified with Cascading Style Sheets
EDITING XHTML A machine that runs a specialized piece of software called a web server stores XHTML documents
FIRST XHTML EXAMPLE In XHTML, text is marked up with elements delimited by tags that are names contained in pairs of angle brackets Every XHTML document contains a start <html> <html> tag and an end </html> </html> tag Some elements may contain attributes that provide additional information about the element Comments in XHTML always begin with <! browser ignores all text inside a comment -- and end with -- --> >. The <!--
FIRST XHTML EXAMPLE (CONT.) Every XHTML document contains a head generally contains: head element which A title title body element A body head head element generally is not rendered in the display window
FIRST XHTML EXAMPLE (CONT.) The title title element: Names a web page Usually appears in the colored bar (called the title bar) at the top of the browser window Is the text identifying a page when users add your page to their list of Favorites or Bookmarks The body body element: Contains the document s content, which may include text and tags
FIRST XHTML EXAMPLE (CONT.) All text placed between the <p> paragraph <p> and </p> </p> tags forms one XHTML documents delimit an element with start and end tags A start tag consists of the element name in angle brackets (e.g., <html> <html>) An end tag consists of the element name preceded by a forward slash (/ /) in angle brackets (e.g., </html> </html>) Many start tags have attributes that provide additional information about an element Each attribute has a name and a value separated by an equals sign (= =)
FIRST XHTML EXAMPLE. 1 <?xml version = <?xml version = "1.0" 2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC " "- -//W3C//DTD XHTML 1.0 Strict//EN" //W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1 "http://www.w3.org/TR/xhtml1/DTD/xhtml1- -strict.dtd" 4 5 <! <!-- -- Fig. Fig. 4.1: main.html 4.1: main.html -- --> > "1.0" encoding = encoding = "utf "utf- -8" 8"?> ?> strict.dtd"> > XHTML comments, not interpreted by the browser 6 6 <! <!-- -- First XHTML example. First XHTML example. -- --> > 7 <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml" "http://www.w3.org/1999/xhtml"> > 8 <head> <head> 9 <title> <title>Welcome Welcome</title> </title> 10 </head> </head> 11 12 <body> <body> 13 <p> <p>Welcome to XHTML! Welcome to XHTML!</p> 14 </body> </body> 15 </html> </html> Creates a head element Creates a title element, which contains the text Welcome Creates a p element within the body, which displays welcome text </p>
COMMON PROGRAMMING ERROR XHTML does not permit tags to overlap a nested element s end tag must appear in the document before the enclosing element s end tag. For example, the nested XHTML tags <head><title>hello</head></title> <head><title>hello</head></title> cause a syntax error, because the enclosing head </head> </head>tag appears before the nested title element s ending </title> </title> tag. headelement s ending
W3C XHTML VALIDATION SERVICE XHTML documents that are syntactically correct are guaranteed to render properly XHTML documents that contain syntax errors may not display properly Validation services (e.g., validator.w3.org an XHTML document is syntactically correct validator.w3.org) ensure that
HEADINGS XHTML provides six headings (h1 through h6) for specifying the relative importance of information Heading element h1 is considered the most significant heading and is rendered in the largest font Each successive heading element (i.e., h2, h3, etc.) is rendered in a progressively smaller font
1 <?xml version = <?xml version = "1.0" 2<!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC " "- -//W3C//DTD XHTML 1.0 Strict//EN" //W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1 "http://www.w3.org/TR/xhtml1/DTD/xhtml1- -strict.dtd" 4 5<! <!-- -- Fig. Fig. 4.2: heading.html 4.2: heading.html -- 6<! <!-- -- Heading elements h1 through h6. Heading elements h1 through h6. -- 7<html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml" "http://www.w3.org/1999/xhtml"> > 8 <head> <head> 9 <title> <title>Headings Headings</title> </title> 10 </head> </head> 11 12 <body> <body> 13 <h1> <h1>Level 1 Heading Level 1 Heading</h1> </h1> 14 <h2> <h2>Level 2 heading Level 2 heading</h2> </h2> 15 <h3> <h3>Level 3 heading Level 3 heading</h3> </h3> 16 <h4> <h4>L Level 4 heading evel 4 heading</h4> </h4> 17 <h5> <h5>Level 5 heading Level 5 heading</h5> </h5> 18 <h6> <h6>Level 6 heading Level 6 heading</h6> </h6> 19 </body> </body> 20</html> </html> "1.0" encoding = encoding = "utf "utf- -8" 8"?> ?> Heading elements h1 h1 through h6 strict.dtd"> > h6 --> > --> > Creates six headings, each with decreasing significance
LINKING A hyperlink references or links to other resources, such as XHTML documents and images Web browsers typically underline text hyperlinks and color them blue by default
LINKING (CONT.) Users can insert links with the a a (anchor) element. href attribute specifies the resource (e.g., page, file, e-mail address) being linked The href Anchors can link to an e-mail address using a mailto: mailto: URL When a user clicks this type of anchored link, most browsers launch the default e-mail program (e.g., Outlook Express) to initiate an e-mail message addressed to the linked address. The strong element typically causes the browser to render text in a bold font
1 <?xml version = <?xml version = "1.0" 2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC " "- -//W3C//DTD XHTML 1.0 Strict//EN" //W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1 "http://www.w3.org/TR/xhtml1/DTD/xhtml1- -strict.dtd" 4 5 <! <!-- -- Fig. Fig. 4.3: links.html 4.3: links.html -- --> > 6 <! <!-- -- Linking to other web pages. Linking to other web pages. -- 7 <html <html xmlns = xmlns = "http://www.w3.org/1999/xhtml" "http://www.w3.org/1999/xhtml"> > 8 <head> <head> 9 <title> <title>Links Links</title> </title> 10 </head> </head> 11 12 <body> <body> 13 <h1> <h1>Here are my favorite sites Here are my favorite sites</h1> 14 <p><strong> <p><strong>Click a name to go to that page. Click a name to go to that page.</strong></p> 15 16 < <! !-- -- Create four text hyperlinks Create four text hyperlinks -- 17 <p><a href = <p><a href = "http://www.deitel.com" "http://www.deitel.com"> >Deitel</a></p> 18 <p><a href = <p><a href = "http://www.prenhall.com" "http://www.prenhall.com"> >Prentice Hall</a></p> 19 <p><a href = <p><a href = "http://www.yahoo.com" "http://www.yahoo.com"> >Yahoo!</a></p> 20 <p><a href = <p><a href = "http://www.usatoday.com" "http://www.usatoday.com"> >USA Today</a></p> 21 </body> </body> 22 </html> </html> "1.0" encoding = encoding = "utf "utf- -8" 8"?> ?> LINKING TO OTHER WEB PAGES. strict.dtd"> > --> > Creates anchor elements that link to the URL specified in the href attribute </h1> strong></p> --> > </a></p> </a></p> </a></p> </a></p>
1 <?xml version = <?xml version = "1.0" 2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC " "- -//W3C//DTD XHTML 1.0 Strict//EN" //W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1 "http://www.w3.org/TR/xhtml1/DTD/xhtml1- -strict.dtd" 4 5 <! <!-- -- Fig. Fig. 4.4: contact.html 4.4: contact.html -- 6 <! <!-- -- Linking to an e Linking to an e- -mail address. mail address. -- 7 < <html xmlns = html xmlns = "http://www.w3.org/1999/xhtml" "http://www.w3.org/1999/xhtml"> > 8 <head> <head> 9 <title> <title>Contact Page Contact Page</title> </title> 10 </head> </head> 11 12 <body> <body> 13 <p> <p> 14 My email address is My email address is 15 <a href = <a href = "mailto:deitel@deitel.com" "mailto:deitel@deitel.com"> > 16 deitel@deitel.com 17 </a> </a> 18 . Click the address and your default email client . Click the address and your default email client 19 will open an e will open an e- -mail message and address it to me mail message and address it to me. 20 </p> </p> 21 </body> </body> 22 </html> </html> "1.0" encoding = encoding = "utf "utf- -8" 8"?> ?> LINKING TO AN E-MAIL ADDRESS strict.dtd"> > --> > --> > Hyperlink that creates a message to the address deitel@deitel.com with the computer s default e-mail program
