4 Introductionto XHTML High thoughts must have high language. —Aristophanes Yea, from the table of my OBJECTIVES memory In this chapter you will learn: I’ll wipe away all trivial fond records. ■ To understand important components of XHTML —William Shakespeare documents. ■ To use XHTML to create web pages. He had a wonderful talent for packing thought close, ■ To add images to web pages. and rendering it portable. ■ To create and use hyperlinks to navigate web pages. —Thomas Babington Macaulay ■ 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> tags. To read between the lines was easier than to follow the text. —Henry James 4.1 Introduction 119 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example 4.4 W3C XHTML Validation Service 4.5 Headings 4.6 Linking 4.7 Images 4.8 Special Characters and Horizontal Rules 4.9 Lists 4.10 Tables 4.11 Forms 4.12 Internal Linking 4.13 meta Elements 4.14 Wrap-Up 4.15 Web Resources Summary | Terminology | Self-Review Exercises | Answers to Self-Review Exercises | Exercises 4.1 Introduction Welcome to the world of opportunity created by the World Wide Web. The Internet is almost four decades old, but it wasn’t until the web’s growth in popularity in the 1990s and the recent start of the Web 2.0 era that the explosion of opportunity we are experienc- ing began. Exciting new developments occur almost daily—the pace of innovation is un- precedented. In this chapter, you’ll develop your own web pages. As the book proceeds, you’ll create increasingly appealing and powerful web pages. Later in the book, you’ll learn how to create complete web-based applications with databases and user interfaces. This chapter begins unlocking the power of web-based application development with XHTML—the Extensible HyperText Markup Language. Later in the chapter, we intro- duce more sophisticated XHTML techniques such as internal linking for easier page nav- igation, forms for collecting information from a web-page visitor and tables , which are particularly useful for structuring information from databases (i.e., software that stores structured sets of data). In the next chapter, we discuss a technology called Cascading Style Sheets™ ( CSS), a technology that makes web pages more visually appealing. Unlike procedural programming languages such as C, C++, or Java, XHTML is a markup language that specifies the format of the text that is displayed in a web browser such as Microsoft’s Internet Explorer or Mozilla Firefox. One key issue when using XHTML is the separation of the presentation of a docu- ment (i.e., the document’s appearance when rendered by a browser) from the structure of the document’s information. XHTML is based on HTML (HyperText Markup Lan- guage)—a legacy technology of the World Wide Web Consortium (W3C). In HTML, it was common to specify both the document’s structure and its formatting. Formatting might specify where the browser placed an element in a web page or the fonts and colors used to display an element. The XHTML 1.0 Strict recommendation (the version of 120 Chapter 4Introduction to XHTML XHTML that we use in this book) allows only a document’s structure to appear in a valid XHTML document, and not its formatting. Normally, such formatting is specified with Cascading Style Sheets (Chapter 5). All our examples in this chapter are based upon the XHTML 1.0 Strict Recommendation. 4.2 Editing XHTML In this chapter, we write XHTML in its source-code form . We create XHTML docu- ments by typing them in a text editor (e.g., Notepad, TextEdit, vi, emacs) and saving them with either an .html or an .htm filename extension. Good Programming Practice 4.1 Assign filenames to documents that describe their functionality. This practice can help you iden- tify documents faster. It also helps people who want to link to a page, by giving them an easy-to- remember name. For example, if you are writing an XHTML document that contains product information, you might want to call it products.html. 4.1 Computers called web servers running specialized software store XHTML docu- ments. Clients (e.g., web browsers) request specific resources such as the XHTML docu- ments from web servers. For example, typing www.deitel.com/books/downloads.html into a web browser’s address field requests downloads.html from the books directory on the web server running at www.deitel.com. We discuss web servers in detail in Chapter 21. For now, we simply place the XHTML documents on our computer and render them by opening them locally with a web browser such as Internet Explorer or Firefox. 4.3 First XHTML Example This chapter presents XHTML markup and provides screen captures that show how a browser renders (i.e., displays) the XHTML. You can download the examples from www.deitel.com/books/iw3htp4. Every XHTML document we show has line numbers for the reader’s convenience—these line numbers are not part of the XHTML documents. As you read this book, open each XHTML document in your web browser so you can view and interact with it as it was originally intended. Figure 4.1 is an XHTML document named main.html. This first example displays the message “Welcome to XHTML!” in the browser. The key line in the program is line 13, which tells the browser to display “Welcome to XHTML!” Now let us consider each line of the program. Lines 1–3 are required in XHTML documents to conform with proper XHTML syntax. For now, copy and paste these lines into each XHTML document you create. The meaning of these lines is discussed in detail in Chapter 14. Lines 5–6 are XHTML comments. XHTML document creators insert comments to improve markup readability and describe the content of a document. Comments also help other people read and understand an XHTML document’s markup and content. Com- ments do not cause the browser to perform any action when the user loads the XHTML document into the web browser to view it. XHTML comments always start with <!-- and end with -->. Each of our XHTML examples includes comments that specify the figure number and filename and provide a brief description of the example’s purpose. Subse- quent examples include comments in the markup, especially to highlight new features. 4.3 First XHTML Example 121 1 <?xml version = "1.0" encoding = "utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 4.1: main.html --> 6 <!-- First XHTML example. --> 7 <html xmlns = "http://www.w3.org/1999/xhtml"> 8 <head> 9 <title>Welcome</title> 10 </head> 11 12 <body> 13 <p>Welcome to XHTML! </p> 14 </body> 15 </html> Title bar shows contents of title element Fig. 4.1 | First XHTML example. Good Programming Practice 4.2 Place comments throughout your markup. Comments help other programmers understand the markup, assist in debugging and list useful information that you do not want the browser to ren- der. Comments also help you understand your own markup when you revisit a document to mod- ify or update it in the future. 4.2 XHTML markup contains text that represents the content of a document and ele- ments that specify a document’s structure. Some important elements of an XHTML doc- ument are the html element, the head element and the body element. The html element encloses the head section (represented by the head element) and the body section (repre- sented by the body element). The head section contains information about the XHTML document, such as its title. The head section also can contain special document formatting instructions called style sheets and client-side programs called scripts for creating dynamic web pages. (We introduce style sheets in Chapter 5 and scripting with JavaScript in Chapter 6.) The body section contains the page’s content that the browser displays when the user visits the web page. XHTML documents delimit an element with start and end tags. A start tag consists of the element name in angle brackets (e.g., <html>). An end tag consists of the element name preceded by a forward slash ( / ) in angle brackets (e.g., </html>). In this example, lines 7 and 15 define the start and end of the html element. Note that the end tag in line 15 has the same name as the start tag, but is preceded by a / inside the angle brackets. Many start tags have attributes that provide additional information about an element. Browsers can use this additional information to determine how to process the element. 122 Chapter 4Introduction to XHTML Each attribute has a name and a value separated by an equals sign ( = ). Line 7 specifies a required attribute ( xmlns ) and value ( http://www.w3.org/1999/xhtml) for the html ele- ment in an XHTML document. For now, simply copy and paste the html element start tag in line 7 into your XHTML documents. We discuss the details of the xmlns attribute in Chapter 14. Common Programming Error 4.1 Not enclosing attribute values in either single or double quotes is a syntax error . However, some web browsers may still render the element correctly. 4.1 Common Programming Error 4.2 Using uppercase letters in an XHTML element or attribute name is a syntax error. However, some web browsers may still render the element correctly.