| Table of Contents | Previous Next |
1.2 A quick start with Web pagesA Web page is a piece of information that can be displayed by the browser software. It can be as simple as displaying a single message on the screen, or as complex as a communicator for fully functional databases of large organizations shared on the Internet. The language used to compose a Web page is usually HTML, originally developed by Tim Berners-Lee and later adopted by the W3C authority. The HTML used in this chapter is simple but very practical for Web page design. 1.2.1 From HTML to XHTMLHTML is a text-based language so that it can be displayed, printed, and edited directly using your favorite editor such as Notepad on your PC. Our first HTML page is a very simple one: Example: ex01-01.htm - Hello World 1: <html> 2: <body> 3: Hello World! 4: </body> 5: </html> This will display a "Hello World!" message inside your browser. The central pillar of all HTML documents is the markup language commands (sometimes called tag names or elements). The HTML language element <html> in line 1 asks the browser to start processing an HTML page or file. The element <body> in line 2 sets the beginning of the contents of the page. Line 3 is the message you want to display. The slash in line 4 indicates the closure of the <body> element. Line 5 denotes the closure of the HTML and hence ends the page. Our second example is a classic one with the elements <title> and <div>: Example: ex01-02.htm - A Page With Font And Size 1: <html> 2: <head> 3: <title> 4: My Second HTML Example ex01-02.htm 5: </title> 6: </head> 7: <body> 8: <div style="font-family:arial;font-size:18pt"> 9: Hello World! 10: </div> 11: </body> 12: </html> The <title> elements between lines 3 and 5 will give the page a title and display it on the title bar of the browser. The <div> division elements between lines 8 and 10 state that you want to open a new division (similar to a paragraph without an additional line break) with the typeface Arial and a font size of 18pt (i.e., 18 points) displaying the "Hello World!" message. If you
you can display the page in your favorite browser. For example, on a PC with Microsoft Windows, the browser can be activated to display the page by
Alternatively, you can drag the file from Windows Explorer and drop it into the browser window. The result is shown in Fig. 1.2. The style attribute used in line 8 to specify the font and size of our message is called the CSS. The style used here is referred to as inline style. CSS is a very important subject on the Web. Much more information on CSS will be presented in Chapter 2. Figure 1.2. ex01-02.htm
The next example is a more interesting one: it represents a classic HTML generator. If you have Outlook Express in your system, it is quite likely that you have used it to write and send emails. Let's just write "Hello World!" in the "Outlook Express: New Mail" window with the typeface Arial and a font size of 18pt as shown in Fig. 1.3. Figure 1.3. Outlook Express
Now, if you click on the middle button Source at the bottom of the window bar (you may need to turn on the Source Edit option inside the View menu to activate this function), you will see a simple HTML page generated by Outlook Express as shown in listing ex01-03.txt. Listing: ex01-03.txt 1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2: <HTML><HEAD> 3: <META content="text/html; charset=windows-1252" http-equiv=Content-Type> 4: <META content="MSHTML 5.00.2314.1000" name=GENERATOR> 5: <STYLE> 6: </STYLE> 7: </HEAD> 8: <BODY bgColor=#ffffff> 9: <DIV><FONT face=Arial size=5>Hello World!</FONT> 10: </DIV> 11: </BODY> 12: </HTML> Apart from the document header in lines 14 and an empty style element <style> in lines 56, this page is very similar to our previous example. It uses Arial and a font size of 5 to display the "Hello World!" message. The attribute bgColor=#ffffff in line 8 is used to set the background color of the page to white. This HTML source code generated by Outlook Express is called the HTML 4.0 Transitional standard as indicated in the first line of the code. In many cases the document header and the <META> element are mainly for validation and/or information purposes. In a normal situation, the browsers will still run properly without these codes. We will discuss the importance of document headers later in Chapter 5 when XML is discussed. HTML 4.0 Transitional is a stable version of HTML from the W3C authority, and has been adopted by a number of commercial products. This book will extend this HTML style and structure to the XHTML standard and use XHTML as a foundation for the discussions of Web technologies. For a good starting point, you can follow these basic steps to convert HTML to XHTML structure:
Listing: ex01-04.txt 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> It is important to pay attention to the above procedures. These simple guidelines will help you to convert from an HTML to XHTML structure and lay a strong XHTML programming foundation for future practical programming on the Web. From now on, the XHTML header (i.e., ex01-04.txt) will be used on all our Web pages. The first and the fourth line of the header are designed for XML and XML namespace so that the page will be rendered properly on dedicated XML software. Lines 23 are for formal declaration of the XHTML standard. In this chapter, we ignore the details, meaning, and behavior of the document header (i.e., lines 14) and include them as they are. In order to understand more about XHTML and use it to make our pages more colorful, we need to add more display fonts, colors, and background functionalities. 1.2.2 Adding fonts, colors, and backgroundSince XHTML pages ignore spaces between elements, you can write more compact code and, in many cases, this will also increase the readability of the code. Let's take a look at the following example with more control over style (i.e., fonts and their sizes). Example: ex01-03.htm - A Page With Different Font Sizes 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title> A Page With Different Font Sizes ex01-03.htm</title> 7: </head> 8: <body> 9: <div style="text-align:center"> 10: <span style="font-family:arial;font-size:12pt">This is Arial size=12</span><br /> 11: <span style="font-family:arial;font-size:14pt">This is Arial size=14</span><br /> 12: <span style="font-family:arial;font-size:18pt">This is Arial size=18</span><br /> 13: <span style="font-family:arial;font-size:24pt">This is Arial size=24</span><br /> 14: <span style="font-family:arial;font-size:30pt">This is Arial size=30</span><br /> 15: <span style="font-family:arial;font-size:42pt">This is Arial size=42</span><br /> 16: </div> 17: </body> 18: </html> The division elements <div> between lines 9 and 16 will generate a new paragraph to be displayed. Some Web developers may prefer to use the paragraph element <p> to create an additional line break instead. The division style in line 9, style="text-align:center", will set the paragraph at the center of the browser window. The section element <span> defines a section of the document (without a new line). The font style inside the section is used to change the associated typeface and size accordingly. Finally, we use a line-break element <br /> to generate a new line. Fig. 1.4 is a screen shot of this page. Figure 1.4. ex01-03.htm
Another useful feature of style is to set the color attribute and make color changes. This is shown in ex01-04.htm and Fig. 1.5. Example: ex01-04.htm - A Page With Different Font Colors 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title> A Page With Different Font Colors ex01-04.htm</title> 7: </head> 8: <body> 9: <div style="text-align:center"> 10: <span style="font-family:arial;font-size:12pt;color:black"> 11: This is Arial size =12</span><br /> 12: <span style="font-family:arial;font-size:14pt;color:red"> 13: This is Arial size =14</span><br /> 14: <span style="font-family:arial;font-size:18pt;color:green"> 15: This is Arial size =18</span><br /> 16: <span style="font-family:arial;font-size:24pt;color:blue"> 17: This is Arial size =24</span><br /> 18: <span style="font-family:arial;font-size:30pt;color:black"> 19: This is Arial size =30</span><br /> 20: <span style="font-family:arial;font-size:42pt;color:fuchsia"> 21: This is Arial size =42</span><br /> 22: </div> 23: </body> 24: </html> Figure 1.5. ex01-04.htm
There are two simple ways to define a color value in XHTML. One is "colored by name" and the other "colored by 24-bit RGB mode." Colors in RGB mode are represented by a set of red, green, and blue color values. Each red, green, and blue is defined by an 8-bit number (hence it ranges from 0 to 255 inclusive), arranged into two hexadecimal numbers (i.e., 00ff). The general format for color attributes is color="#RRGGBB". For example, the attribute color="#123456" defines a color value with red="12", green="34", and blue="56". Since we are using two hexadecimal numbers to represent each red, green, and blue, the maximum color value is color="#ffffff" (i.e., white) and the minimum value is color="#000000" (i.e., black). Some more examples are color = "#ff0000" => red=ff, green=00, blue=00 => combination is red color = "#00ff00" => red=00, green=ff, blue=00 => combination is green color = "#0000ff" => red=00, green=00, blue=ff => combination is blue color = "#ffff00" => red=ff, green=ff, blue=00 => combination is yellow color = "#ff00ff" => red=ff, green=00, blue=ff => combination is fuchsia If the color values in example ex01-04.htm are replaced with the RGB value above, you will have exactly the same display as before. The total number of red, green, and blue color combinations is well over 16 million. Background colors are also essential for many applications. One of the easiest ways to control the background color setting in XHTML is the style="background:#cccccc" attribute inside the <body> element. For example, the statement <body style="background:#aaaaaa"> will set the background color of the XHTML page to gray. Now, let's modify the page ex01-04.htm by adding a background color: Example ex01-05.htm - A Page With Background Color: 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title> A Page With Background Color ex01-05.htm</title> 7: </head> 8: <body style="background:#aaaaaa"> 9: <div style="text-align:center"> 10: <span style="font-family:arial;font-size:12pt;color:#000000"> 11: This is Arial size =12</span><br /> 12: <span style="font-family:arial;font-size:14pt;color:#ff0000"> 13: This is Arial size =14</span><br /> 14: <span style="font-family:arial;font-size:18pt;color:#00ff00"> 15: This is Arial size =18</span><br /> 16: <span style="font-family:arial;font-size:24pt;color:#0000ff"> 17: This is Arial size =24</span><br /> 18: <span style="font-family:arial;font-size:30pt;color:#ff00ff"> 19: This is Arial size =30</span><br /> 20: <span style="font-family:arial;font-size:42pt;color:#ffff00"> 21: <b>Arial size =42 Bold</b></span><br /> 22: </div> 23: </body> 24: </html> The bold element <b> in line 21 is used to set the font as bold type and hence provide a stronger character effect on the screen. A screen shot of this page is shown in Fig. 1.6. Figure 1.6. ex01-05.htm
1.2.3 A "Thank You!" page to Web visitorsYou now have everything you need to create a simple "Thank You!" Web page. This page displays a welcome message to all visitors as shown in Fig. 1.7. Since our Web site is obviously not yet fully functional, a page like this can be quite useful for visitors. Figure 1.7. ex01-06.htm
The page can be easily constructed by using <body>, <div>, <br /> and <b> elements and their associated attributes. Example: ex01-06.htm - A Thankyou Page 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title> A Thankyou Page ex01-06.htm</title> 7: </head> 8: <body style="background:#000044"> 9: <div style="text-align:center"> 10: <span style="font-family:arial;font-size:42pt;color:#00ffff"> 11: <b>Welcome To</b> <br /> </span> 12: <span style="font-family:arial;font-size:30pt;color:#ffff00"> 13: <b>My Personal Web Page</b> <br /> </span> 14: <span style="font-family:arial;font-size:23pt;color:#ff0000"> 15: <b>www.pwt-ex.com/JohnSmith/index.htm</b> <br /> <br /> <br /> </span> 16: <span style="font-family:arial;font-size:23pt;color:#ffff00"> 17: <b>This Web Site Will Be Available Soon !</b> <br /> </span> 18: <span style="font-family:arial;font-size:18pt;color:#00ff00"> 19: <b>Please Contact Me Using the Following Email</b> <br /> <br /> </span> 20: <span style="font-family:arial;font-size:14pt;color:#00ffff"> 21: <b>JohnSmith@pwt-ex.com</b> <br /> <br /> </span> 22: <span style="font-family:arial;font-size:30pt;color:#ff0000"> 23: <b>Thank You!</b> </span> 24: </div> 25: </body> 26: </html> If you have a Web site address and some storage space on the Web site, you can put this file into storage for visitors to browse. For example, your ISP (e.g., www.pwt-ex.com) may provide you with the following personal Web site address and space (or root directory):
You can upload the file (e.g., ex01-06.htm) onto the public_html directory of your Web site address using software such as File Transfer Protocol (FTP). Details will be presented at the end of this chapter. Your friends or other visitors can then access your page via the "http" command
Note that if you rename the file ex01-06.htm as index.htm, visitors can normally access your page by using the command
If you have a Web site address called www.mysite.com and you have a default Web page file called index.htm or default.htm in your Web directory, then this page, and hence your site, can be browsed directly using the command
In practice, a "Thank You" page is sometimes very convenient for event handling such as "Error," "Sorry," "Waiting," "Alert," and "Confirm." You will notice that these types of pages are common on the Web. In order to have a more colorful, eye-catching XHTML page, we must now integrate images into it. You will be surprised at how easily one can incorporate images into Web pages. |
| Table of Contents | Previous Next |
