Copyright © 2003 Pearson Education, Inc. Slide 1-1 Created by Cheryl M. Hughes The Web Wizard’s Guide to XHTML by Cheryl M. Hughes

Copyright © 2003 Pearson Education, Inc. Slide 1-2 CHAPTER 1 XHTML and the World Wide Web

Copyright © 2003 Pearson Education, Inc. Slide 1-3 Overview of the World Wide Web The Internet consists of many applications, not just the web: Telnet FTP News Applications on the Internet all communicate over TCP/IP networks (Transmission Control Protocol/Internet Protocol) The use of these standard protocols allow computers running different operating systems (like Windows and Apple computers) to communicate with each other The protocol that web browsers use to communicate with web servers is HTTP, Hypertext Transfer Protocol Web protocols are created by the World Wide Web Consortium (W3C) –

Copyright © 2003 Pearson Education, Inc. Slide 1-4 Web Browsers and Web Servers 1. The Web browser makes a request to the web server 2. The server which is running an HTTP server that is listening for requests, receives the request and locates the document. 3. The server then sends back the content of the requested page to the client. 4. The browser receives the information from the server and displays the page in the browser window. The transaction is now complete.

Copyright © 2003 Pearson Education, Inc. Slide 1-5 Markup Languages SGML stands for “Standard Generalized Markup Language” and was developed in the 1960’s as the first standardized markup language HTML was developed in the early 1990’s as a lightweight application of SGML for transporting documents over HTTP HTML documents were portable among different operating systems and computer applications XML was developed to address the limitations of HTML XML is a meta-language, or a set of rules, for building other languages XML and HTML are both SGLM applications XHTML is the successor of HTML

Copyright © 2003 Pearson Education, Inc. Slide 1-6 HTML Limitations HTML elements define presentation and formatting styles, but not data HTML has a finite set of elements and cannot be extended or customized HTML syntax is not strict HTML’s limitations are being stretched with the introduction of new technologies and web clients, like cell phone and PDA’s HTML 4.01 is the last version of HTML to be developed

Copyright © 2003 Pearson Education, Inc. Slide 1-7 Origins of Markup Languages

Copyright © 2003 Pearson Education, Inc. Slide 1-8 Overview of XHTML The first version of XHTML, 1.0, was released in 2000 W3C description of XHTML : XHTML 1.0 reformulates HTML as an XML application. This makes it easier to process and easier to maintain. XHTML 1.0 borrows elements and attributes from W3C's earlier work on HTML 4, and can be interpreted by existing browsers, by following a few simple guidelines. This allows you to start using XHTML now! XHTML is extensible meaning that its element set is not finite, like that of HTML. Additional elements or other XML-based languages can be integrated with XHTML XHTML consists of the element set of HTML reformulated to adhere to the syntax rules of XML XHTML is compatible with existing web browser technology and will be compatible with future XML-based clients

Copyright © 2003 Pearson Education, Inc. Slide 1-9 Building XHTML Documents Elements consist of a start tag, content and an end tag: Introduction to XHTML Empty elements are used to describe elements that do not have any content: Attributes are used to describe elements and are placed inside the open tag of an element: Comments are used to notate the document, but are not processed by parsers: Start TagContent End Tag

Copyright © 2003 Pearson Education, Inc. Slide 1-10 Three Flavors of XHTML 1.0 XHTML Transitional: Currently the most-used version of XHTML 1.0. This version most resembles HTML This version is the best choice when documents need to use HTMLs presentational elements or when pages need to be developed without using style sheets. Use this version if you want to convert existing HTML pages to XHTML. The caveat to the Transitional version is that it contains support for certain elements and attributes that are being deprecated, or phased out. It also does not contain support for frames. XHTML Frameset: Should be used when your documents need to use the frame elements that are used to partition the browser into multiple independent windows. The element set for this version contains all of the elements from XHTML Transitional plus the elements needed to support frames, such as and. XHTML Strict XHTML Strict most closely represents the future of XHTML. The element set for XHTML Strict contains a subset of the elements from XHTML Transitional, but does not include support for strictly presentational elements or elements that will not likely be included in future versions of XHTML. In the future, XHTML documents will separate presentation from content and use style sheets to define presentation formatting such as font types, colors, and styles. Use XHTML Strict with Cascading Style Sheets (CSS). You will learn about CSS and how to use style sheets with XHTML documents in Chapter 7.

Copyright © 2003 Pearson Education, Inc. Slide 1-11 XHTML Document Example 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Introduction to XHTML Course Name: Introduction to XHTML 9 Course Number: CS Instructor: T. Perdue 11 Meeting Time: Wednesday, 5:30pm–7:30pm Course Description: This course covers the basics of how to write XHTML Web documents Prerequsites: CS 101—Introduction to Computers 18 CS 103—Introduction to Web Site Design 19 CS 110—Designing Web Pages with HTML

Copyright © 2003 Pearson Education, Inc. Slide 1-12 XHTML Document Example

Copyright © 2003 Pearson Education, Inc. Slide 1-13 Differences Between XHTML and HTML 1.XHTML documents contain the XML and DOCTYPE declarations at the top of the document. The XML declaration is optional but the DOCTYPE declaration is required. The DOCTYPE declaration was optional in HTML. These are lines 1 and 2 in the XHTML example. We cover this in detail later in this chapter. 2.XHTML documents must be well formed, meaning that they need to adhere to the syntax rules for the language. HTML, however, does not strictly require that documents be well formed. This is covered later in this chapter. 3.XHTML is not dependent on a single document type or set of markup elements, like HTML. XHTML can be extended or used in conjunction with other markup languages. 4.Element and attribute names must be lowercase. XHTML elements and attributes are case sensitive, while HTML elements and attributes are not. In our examples, notice that the HTML elements are all uppercase:,,. This was done simply as a matter of style. These tags could have been written in lowercase or in a combination of upper and lowercase, and HTML would still have interpreted them correctly:,,. The XHTML document, on the other hand, must have all of its tags and attributes in lowercase. 5.For nonempty elements, XHTML requires end tags. An empty element is an element that does not contain an end tag. This is not a requirement for HTML, as the HTML element set contains a subset of elements that do not have end tags. In our example, the and HTML elements are empty elements. In the XHTML code, notice that these elements are written a little differently: and. In XHTML, all elements must either have an end tag or end in />. 6.Attribute values must always be quoted in XHTML. This was not a requirement in HTML. The following is valid in HTML: The attribute src has a value of picture.gif assigned to it. However, the same line in the XHTML example places quotes around the value of the attribute: 1. XHTML documents contain the XML and DOCTYPE declarations at the top of the document. The XML declaration is optional but the DOCTYPE declaration is required. The DOCTYPE declaration was optional in HTML. 2. XHTML documents must be well formed. HTML, however, does not strictly require that documents be well formed. 3. XHTML is not dependent on a single document type or set of markup elements, like HTML. 4. Element and attribute names must be lowercase. XHTML elements and attributes are case sensitive, while HTML elements and attributes are not. 5. For nonempty elements, XHTML requires end tags. 6. Attribute values must always be quoted in XHTML. This was not a requirement in HTML.

Copyright © 2003 Pearson Education, Inc. Slide 1-14 Well-Formed XHTML Documents 1. XHTML documents must contain the root element 2. All elements must have a start and end tag, or must be an empty element 3. Elements must be nested properly 4. All attributes must have a value 5. Attributes must be placed in the start tag 6. Element names are case sensitive

Copyright © 2003 Pearson Education, Inc. Slide 1-15 Validating XHTML Documents Valid documents must be well-formed and adhere to the rules of a DTD: XHTML Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " XHTML Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " XHTML Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Validate documents online at the W3C’s Validator website: