1.1 Introduction: a practical review of XHTML

1.1 Introduction: a practical review of XHTML

This chapter is an introduction to the Extensible Hyper Text Markup Language (XHTML) from a practical point of view, starting with simple Hyper Text Markup Language (HTML) pages and moving on quickly to XHTML documents and Web site design. You will learn how to write XHTML pages, build a functional Web site on the Internet, and get it registered on some of the most popular public search engines. Along with the Web page design, some detailed information on what happens inside the browser is also provided so that the communication and science behind the Web pages, browser, and the World Wide Web can be understood. Very little background knowledge is assumed and readers with some experience of using browsers such as Internet Explorer (IE) and Netscape (NS) should be able to complete this chapter easily.

While this chapter may not show you the whole of the subject, it should give you a solid basis for coping with more advanced stages of Web programming and technologies. Thanks to the standardization work of the World Wide Web Consortium (W3C) and many dedicated organizations and Internet engineers, Web technologies are becoming more and more stable and reliable. Many people are beginning to believe that Web applications are conquering every corner of the Internet. By following the Web standard recommended by the W3C authority, we have ensured that all examples in this chapter are XHTML compliant. They are validated as XHTML formal standard and tested on major browser software including IE5.x, IE6.+, NS4.x, NS6+, and Opera 6.+.

After covering the basic knowledge on Web configurations and how they work, this chapter will introduce some of the fundamental HTML/XHTML features such as text formatting, hyperlinks, images, and tables. These are the most basic elements that bring Web documents (or HTML files) alive. In particular, the use of images on Web pages generates a high level of visualization of documents, business logos, and commercial products. Often, they are vital for many businesses on the World Wide Web. Tables are one of the most useful tools in Web publishing: you'll find tables all over the Internet; they are often behind well-formed and structured Web pages.

Because XHTML brings strict programming style, strong discipline, and Extensible Markup Language (XML) compatibility to HTML pages, it is believed to be the next generation of HTML. Therefore in this book we generally use XHTML as our foundation for the discussion of Web technologies. Also, the discussion in this chapter will help you to understand the formal introduction to XML and XML Style Sheet Language Transformation (XSLT) in Chapter 5.

We begin by examining a sample HTML page generated by Microsoft Outlook Express. Using the simple rules and steps mentioned in section 1.2.1, HTML pages can be converted quite easily into XHTML format and put into immediate use with existing browsers such as IE or NS. Since HTML and XHTML are almost identical in practice, we generally treat all XHTML files as HTML and use the file extension ".htm."

Along with some practical examples of Web pages and the simple Cascading Style Sheet (CSS), our Web site development begins with a simple "Thank You" page for Web visitors. A page like this is handy and can be used as an error-handling page on the Internet. The "Graphical Edge" technique, using background images and transparency, is also discussed. Together with Material Effects, Animated Pictures, Hyper Links, and the integration of Tables and Frames, we develop a picture that every Web designer (or programmer) requires. By the end of this chapter, you will be able to have a Web site up and running and understand the basic XHTML building blocks of a Web page for World Wide Web users.

First, let's look at some basic details on Web requirements, Web configurations, and, more importantly, how the Web works.

1.1.1 Web requirements: a working browser

The basic requirement for accessing the Web is a machine (or computer) running browser software that has the ability to connect to the Internet environment and Web community. This may involve a permanent network connection, a local area network (LAN), or a personal one via a telephone line and an Internet Service Provider (ISP). A basic diagram showing how the Web works is given in Fig. 1.1.

By today's standards, with ISPs everywhere, even home-based computers are well equipped and have more than the basic Internet requirements. For the purposes of this chapter, and this book, we will assume that your machine has the basic Internet capabilities and that you have some experience in using Web browsers. Some other server requirements will be discussed when appropriate.

1.1.2 Web configurations: how the Web works

To access the Web, your computer (a Web client) will have to connect to another machine (a Web server) on the Internet via a network medium. For most home-based users, the Web server is usually a permanent machine on the Internet provided by the ISP and running server software. These systems may be a Microsoft NT system powered by the Internet Information Server (IIS) or UNIX (or LINUX) systems with Apache. Web browsers can be used to access millions of servers and get information by using the Hyper Text Transfer Protocol (HTTP). This process is sometimes called "The canonical browserserver interaction."

Typically, a Web client requests a document from a Web server through the HTTP command and a Uniform Resource Locator (URL). This occurs when the user types a Web address into the address field inside the browser. The server returns the document (usually in HTML format) and the browser displays that document in the browser window. This operation is generally referred to as Web.

The details of the browserserver dialog are not very important at this moment. The main task of the browser is to send the document request and the server is the machine that delivers the document. Consider the following command which you type in the address field of IE or NS:

http://www.abc.com/doc01.htm

This is one of the typical HTTP commands used to request the document doc01.htm from the www.abc.com site. A typical message that your browser will send to the server is

Listing: ex01-01.txt

 1:  GET /doc01.htm HTTP/1.0
 2:  Accept:www/source
 3:  Accept:text/html
 4:  Accept:image/gif
     ....
     ....
30:  Accept:
31:  User-Agent:       ((Your browser software ID))
32:  From:             ((Your Email Address ID))
34:    * a blank line *

For ease of reference, line numbers have been added to all listings in this book. The first line indicates which file the client wants and announces that the communication is HTTP version 1.0. This communication relies on the listed Accept elements in Multipurpose Internet Mail Extension (MIME) format. For example, in line 3, the text text/html means that the browser is expecting an HTML document in return. The blank line at the end identifies the end of the request.

The server, in this case www.abc.com, will then respond with a similar message like this:

Listing: ex01-02.txt

1:   HTTP/1.0 200 OK
2:   Date: Wednesday, 15-Oct-2003 13:04:12 GMT
3:   Server:   ((Your Server Information))
4:   MIME-version: 1.0
5:   Last-modified: Monday, 13-Oct-2003 11:33:16 GMT
6:   Content-type: text/html
7:   Content-length: 5312
8:        * a blank line *
9:   <html><head><title>...</title></head><body>...((etc))

In line 1, the Web server agrees to use HTTP for communication and the status 200 indicates the successful completion of the whole request. After some HTTP system variables, Content-type: text/html in line 6 confirms that the document returned will indeed be an HTML document (or page). The entire HTML page will then be transmitted to the browser as illustrated in line 9. The entire dialog is specified by HTTP. The browser finally interprets this page and displays it on the screen. Again, the details of this dialog are not essential at this point.

This interaction or dialog set-up is important and considered as the foundation for all technologies between browsers and servers such as Perl, ASP, and PHP. A dialog like this will be discussed from time to time throughout this book when server technologies are introduced. At a minimum level, this dialog shows how and why a Web browser functions on the Web.

With the vast diversity of Web technologies we have today, the capabilities of browsers are far beyond the original HTML level. In order to gain a good grasp of the basic concepts, you can begin by designing some simple Web pages.