WEB PAGE DESIGN AND CREATION - Pearson Educationwps.prenhall.com/wps/media/objects/8362/8562891/... · A WEB PAGE DESIGN AND CREATION APPENDIX Content A.1 HTML A.2 Cascading Style

A

WEB PAGE DESIGNAND CREATION

AP

PE

ND

IX

ContentA.1 HTML

A.2 Cascading Style Sheets

A.3 eXtensible Markup Language

A.4 Rich Internet Applications and Ajax

A-1

A

The primary role of an EC Web site is toenable a business transaction to occur. A typicalB2C Web site provides prospective customers withthe means to browse product offerings, select oneor more products for purchase, place an order, payfor the order, track orders, and review theiraccounts. Although it takes specialized skills tocraft a B2C Web site that is both engaging andeasy to use, the underlying fundamentals of Webpage design and creation are the same for any typeof Web page.

A Web site is simply a series of individualWeb pages. Some of these pages are “static,” mean-ing they are created ahead of time (like a MicrosoftWord document or a text file) and stored at thesite. Anyone who accesses a static Web page isgoing to see the same thing. Other pages deliveredby a Web site are “dynamic.” This means that thepage content is created by a computer programthat is run every time the page is accessed. Thus,the contents can vary from one user to the next orfrom one time to the next.

A-2 Appendix A: Web Page Design and Creation

Regardless of whether a Web page is static or dynamic, the language used to create themajority of the page is the same. This language is called the Hypertext Markup Language(HTML). This appendix discusses HTML basics and examines how Web pages are created.The discussion of various scripting languages and programming interfaces that are used tocreate dynamic pages are beyond the scope of this text. Readers interested in these advancedtopics should refer to Suehring (2008) or the JavaScript tutorials provided at w3schools.com/js/default.asp.

HTML provides the means to control both the content and appearance of a page. If asite consists of a few pages, then standard HTML will suffice. For larger sites, maintenance issimplified if the contents of the pages can be treated separately from their appearance. This iswhere standards such as Cascading Style Sheets (CSS) and the eXtensible Markup Language(XML) come into play. Both of these standards are explored briefly in this appendix.

A.1 HTMLVirtually every page on the Web has an underlying text (ASCII) file containing markuptags that describe the structure and content of the page. When you view a particular page,you are seeing your browser’s rendering, or interpretation, of those tags. For instance,consider the sample Web page shown in Exhibit A.1. This is the homepage (starting page)of a Web site (premiumselect.com) for a hypothetical online wine and cheese merchantcalled Premium Selections. The page was generated by the simple set of tags displayed inExhibit A.2. Throughout this appendix, this hypothetical site will serve to illustrate variousfeatures of HTML and Web page construction. For this reason, the content and underly-ing tags have been kept to a minimum, especially when compared to a real online winemerchant site such as mywinesdirect.com. As noted, the HTML text file underlying thisexample homepage is shown in Exhibit A.2. Like other static Web pages, this page consistsof a series of tags. Most, but not all, tags come in pairs. For example, in Exhibit A.2 the<H1> . . . </H1> tags indicate that the enclosed text is to be treated as a “number 1headline.” If you want to see the HTML tags underlying any particular Web page, accessthe page, click the “View” menu at the top of the browser, and then select either “Source” inMicrosoft Internet Explorer or “Page Source” in Mozilla Firefox. A window will appeardisplaying the HTML code for the page.

Before we look in detail at the syntax and use of specific HTML tags, let’s briefly reviewthose shown in Exhibit A.2.

1. The <HTML> . . . </HTML> tags that surround the other tags on the page basicallytell the browser that this is a Web page.

2. The head (<HEAD> . . . </HEAD>) is the first component of the page. The head con-tains a title (<TITLE>title text</TITLE>). The text of the title is displayed on the titlebar at the top of the browser. In this case, the words “Premium Selections” will appear onthe title bar.

3. The second major component of the page is its body (<BODY> . . . </BODY>). In thisexample, the <BODY> tag specifies various color parameters for the page. Includedamong these parameters are the page’s background color (BGCOLOR=“white”), themain text color (TEXT=“black”), and the color of the hypertext links (LINK=“black”).The body of the page is where you find the real contents—in this case, a company logo,some headline text, some descriptive text, and three hypertext links pointing to otherpages at the site.

4. At the top of the page is an image of the company’s logo. The image is specified by an<IMG> tag. Like the <BODY> tag, the <IMG> tag usually contains a series of parametersdelimiting various features of the image. In this case, there is only one parameter—the “source” of the image or, more specifically, the name of the image file (SRC=“www.premiumselect.com/companylogo.gif ”).

Hypertext MarkupLanguage (HTML)The language used to create Web pages.

Appendix A: Web Page Design and Creation A-3

EXHIBIT A.1 Homepage for Premium Selections

EXHIBIT A.2 Sample Web Page Code<HTML><HEAD><TITLE>Premium Selections</TITLE></HEAD><BODY BGCOLOR=“white” TEXT=“black” LINK=“black”><P><IMG SRC=“www.premiumselect.com/companylogo.gif”></P><H1>Premium Selections</H1>Specializing in fine domestic wines and cheeses.<P><A HREF=“www.premiumselect.com/wines.htm”>Wine Shop</A></P><P><A HREF=“www.premiumselect.com/cheeses.htm”>Cheese Shop</A></P><P><A HREF=“www.premiumselect.com/shoppingcart.exe”>Review Shopping Cart</A></P></BODY></HTML>


5. The logo is followed by a headline specified by a headline tag (<H1>headlinetext</H1>). Headlines come in various sizes, from H1 to H6. The number determinesthe size and style of the font used to display the headline text. The smaller the numberis, the larger the font. The browser determines the specific font that is used with aparticular number.

6. After the headlines comes simple descriptive text (“Specializing in fine domestic winesand cheeses.”). Because the text does not have a tag, it will be displayed as is (again, withthe font determined by the browser).

7. Next is a series of three hypertext links each specified by an anchor tag (<A>some textor an image</A>). Each of the anchor tags has a hypertext reference (HREF) thatdesignates the page that will be returned when a user clicks the anchor. For instance,when the user clicks the first anchor (<A HREF=www.premiumselect.com/wines.htm>Wine Shop</A>), the page “wines.htm” will be retrieved. Anchors appearon a page in the form of text or an image. In this example, the anchors are text. Howis the text of an anchor distinguished from regular text? First, the text of an anchor isunderlined and often has a different color than regular text. Second, when themouse cursor is over an anchor, the shape of the cursor usually changes from an arrowto a hand.

8. Finally, a series of paragraph tags (<P> . . . </P>) surround the image and anchor tags.These paragraph tags simply serve to add line spacing around the image and to anchorthe text. If they were not there, everything on the page would run together.

At this point, you might want to experiment a little bit with this example. To do so,activate a simple text editor (such as Microsoft ’s Notepad) and type in the text thatappears in Exhibit A.2. However, leave out the <IMG> tag and the paragraph tagssurrounding the image. Name the file something like “myfile.htm” and save it to a subdi-rectory on your machine (Note: If you are using Notepad, the first time you save the fileyou will have to save it as a File Type of “All Files” rather than as a File Type of “TextDocument”). After you save the file, do not close the text editor. Open your Web browser.Select the “File” menu at the top of the browser. Then select “Open” from the File menu.A file selection dialog box will appear. Find the file you saved and open it. If you have notmade any mistakes, you should see something similar to Exhibit A.1, but without thelogo. We are now ready for some experimentation. Go back to the text editor and trysome of the changes in the following list:

1. Change BGCOLOR from “white” to “blue,” the TEXT from “black” to “white,” andLINK from “black” to “yellow.” Save the file, but do not close the editor. Return toyour browser, click the “View” menu, and select “Refresh.” The colors on the pageshould change.

2. Change the headline tags from a “number 1 headline” (<H1> . . . </H1>) to a “number 2headline” (<H2> . . . </H2>). Save the file, but do not close the editor. Return to yourbrowser, click the “View” menu, and select “Refresh.” The font size of the headlineshould change.

3. Remove the paragraph tags surrounding the anchor tags. Save the file, but do not closethe editor. Return to your browser, click the “View” menu, and select “Refresh.” All ofthe anchor tags should appear on a single line.

In the remainder of this appendix you will be exposed to a variety of other tags that canbe used to create both simple and complex pages.

OVERVIEW OF HTML TAGSHTML is based on a set of standards controlled by the World Wide Web Consortium (W3C atw3.org/MarkUp). The current standard is HTML 4.01. The W3C has also reformulatedHTML 4.01 in XML (see the discussion on XML later in the appendix) and has produced astandard called XHTML, for eXtensible Hypertext Markup Language. The current version is


1.1 (also described at w3.org/MarkUp). Although this version has the support of the consortium,its adoption has been spotty. Most sites still use HTML rather than the more formal XHML.

A new version of HTML, HTML 5, is starting to work its way through the W3C recom-mendation process. Currently, it is in working draft form, the first stage of the process.This ver-sion also has an associated version of XHTML, called XHTML 5. HTML 5 and XHTML 5enhance the forms capabilities of HTML and simplify the process of including audio and videoon Web pages. Although it is early in the process, parts of HTML 5 will slowly but surely beginto be supported by the Web browsers even before the standard is adopted by W3C.

In this short appendix, it is not possible to do justice to the myriad of tags in HTML4.01 and the variety of methods and techniques used to create the sophisticated pages foundacross the Web. If you are interested in understanding the current HTML standard, seeHarris (2008). A number of Web sites offer tutorials demonstrating the standard (e.g.,w3schools.com/html). If you are interested in Web site design, a book such as Beaird (2007)or McNeil (2008) will fit the bill. Because it is possible to list the HTML source behind anyWeb page, another way to learn about design ideas and the use of various tags is to browsethe Web and view the source code for pages that look interesting. If you decide to use some-one else’s source code on your own pages, you will need to be careful about what you use.Certain images, text, and general designs are trademarked and copyright protected.

Although HTML 4.01 makes it possible to create very sophisticated Web pages, it isimportant to note that many of the most successful sites rely on a handful of tags and verysimple designs. In this way, the pages can be downloaded quickly over even the slowest modemsand viewed in virtually any Web browser. Exhibit A.3 lists some of the basic tags used with

EXHIBIT A.3 Basic HTML TagsType HTML TagsText formatting <B>bold</B>

<EM>emphasis</EM><H#>header1</H#>, where # is 1 to 6<FONT>text font

Positions, paragraphs, spacing <CENTER>centered content</CENTER><BR>line break<P>paragraph</P><DIV>divided content</DIV><SPAN>span of content</SPAN>

Tables <TABLE>table content</TABLE><TR>table row</TR><TH>table header</TH><TD>table data</TD>

Lists <UL>unordered list</UL><OL>ordered list</OL><LI>list item</LI>

Form <FORM>form content</FORM><INPUT>input area</INPUT><TEXT>text input box</TEXT><TEXT AREA>multiline text input</TEXT AREA><SELECT>list of selections</SELECT>

Document <HTML>HTML document</HTML><HEAD>doc head</HEAD><BODY>doc body</BODY><TITLE>doc title</TITLE>

Graphics <IMG>graphic image<HR>horizontal rule/line

Linking and anchor <A HREF>anchor content</A>


many of today’s sites. Rather than detailing each of the individual tags in Exhibit A.3, in thediscussion that follows we look at the use of images, tables, and forms.

Linking Pages with Anchor TagsAnchor tags provide the hypertext links that enable users to “surf ” the Web from one site orpage to another. On a Web page, an anchor appears in the form of either underlined text oran image (sometimes denoted with a border around it). In either case, when the mouse cur-sor moves over an anchor, the cursor changes shape, indicating that a click will retrieve thelinked page. The syntax of an anchor tag is <A HREF=“URL”>anchor text or image</A>,where “URL” represents the Web address of a linked Web page or another location on thesame Web page. For example, in Exhibit A.2 the anchor tag

<A HREF=www.premiumselect.com/wines.htm>Wine Shop</A>

is displayed on the page as the underlined text “Wine Shop.” When this anchor is clicked, arequest will be sent to the Web server “www.premimumselect.com” to retrieve the HTMLpage “wines.htm.”

Anchors can also be used to tell a Web server to run a program. At an e-commerce site,the program might be used to collect marketing data from a potential consumer and store itin a database for later use, display a particular catalog page depending on a consumer’s query,or process a consumer’s purchase order. Usually, a program will require some input informa-tion in order to run. For instance, to process a purchase order, the program will need thebuyer’s name, address, credit card number, items and quantities being purchased, and so on.This information can be specified with the anchor tag or collected from a Web form. Once aprogram is run, the program will dynamically produce a response in the form of an HTMLpage that will be returned by the Web server.

In order to run a program, the syntax of the anchor needs to look like:

<A HREF=“server_name/subdirectory/program_name”>anchor text or image</A>

For example, in Exhibit A.2 when the “www.premiumselect.com” anchor is clicked theWeb server will run a program called “shoppingcart.exe,” which will show a potential buyerthe purchases he or she has selected up to that point in time:

<A HREF=www.premiumselect.com/shoppingcart.exe>Review Shopping Cart</A>

Adding Images to a PageOne of the major attractions of the Web is the integration of text and images. The Webwould be a rather unexciting place if it were simply “hypertext” rather than “hypermedia.”Images serve a variety of functions on a Web page, including:

◗ Embellishing the aesthetics of a page◗ Enhancing the information and data contained in the page◗ Serving as buttons or icons linking one page to another◗ Focusing or attracting attention to particular areas of a page (e.g., an animated advertisement)

As noted in our earlier example, images are incorporated in a page with the <IMG> tag.The syntax of the <IMG> tag is:

<IMG SRC=“image file” image parameters>

where the “image file” is the name of the image file and “image parameters” represents a listof potential parameters specifying features such as the image’s WIDTH, HEIGHT,ALIGNMENT, and so on.

A wide variety of image formats are supported on the Web. The two most popularformats are GIF (.gif files) and JPEG (.jpg files). JPEG is used when higher quality images arerequired. To use an image as a hypertext button or icon to link one page to another, the<IMG> tag must be embedded within an anchor tag. As an example, consider Exhibit A.4


EXHIBIT A.4 Images as Anchors for Hypertext Linking

and the associated HTML file shown in Exhibit A.5. Again, there are three anchors on thepage. Each of the anchors is denoted with image and text. For example, the first anchor, whichlinks to the Wine Shop, has an image <IMG SRC=“wines.gif ” BORDER=0 ALIGN=TOP>followed by some text (“Wine Shop”). In this case, the image has two additional parameters.The first says that the image should be displayed without a border (BORDER=0). The other

EXHIBIT A.5 HTML Tags for Image Anchor<HTML><HEAD><TITLE>Premium Selections</TITLE></HEAD><BODY BGCOLOR=“white” TEXT=“black” LINK=“black”><H1>Premium Selections</H1>Specializing in fine domestic wines and cheeses.<P><A HREF=“wines.htm”><IMG SRC=“wines.gif” BORDER=0 ALIGN=middle>Wine Shop</A></P><P><A HREF=“cheeses.htm”><IMG SRC=“cheeses.gif” BORDER=0 ALIGN=middle>Cheese Shop</A></P><P><A HREF=“shoppingcart.exe”><IMG SRC=“shopcart.gif” BORDER=0 ALIGN=middle>Review Shopping Cart</A></P></BODY></HTML>

EXHIBIT A.6 Elements of an HTML Table


option is BORDER=1. The second parameter (ALIGN=MIDDLE) states that the middle ofthe image should be lined up with the text. Some other options are ALIGN=TOP orALIGN=BOTTOM.

Displaying Data and Controlling Page Layout with TablesIn HTML, tables have two purposes: to display numbers and text in tabular form and to con-trol the layout of various sections and components on a page. Exhibit A.6 outlines the basicstructure of an HTML table.

You need to know the following to understand the rudiments of HTML tables(<TABLE> . . . </TABLE>):

◗ Tables consist of three basic elements: rows (<TR> . . . </TR>), headers(<TH> . . . </TH>), and cells (<TD> . . . </TD>).

◗ Tables are laid out row-by-row, starting with the row of column headers at the top of a table.

◗ Table headers and cells can contain virtually anything, including text, images, anchors,other tables, or some combination of these.

◗ Tables can be displayed with or without grid lines, which are called “borders” and arespecified as being “on” <TABLE BORDER=1> or “off ” <TABLE BORDER=0>.

If you think of a page as a table of cells where the borders between the cells are turned off,then you begin to see how tables can be used to control the layout of a page by simply puttingtext and images within particular cells of the table.

Tables can become very complicated. Tables can contain other tables, and rowsand columns can span one another. In this discussion, we will stick with the basics.To illustrate the basics, first examine the page shown in Exhibit A.7. This is the WineShop page of the Premium Selections site. The associated HTML file is shown inExhibit A.8. This page does not use tables. Instead, a series of paragraph tags(<P> . . . </P>) and break tags (<BR>) are interspersed throughout the page to controlits layout. Besides the fact that the page looks a little boring, it is also difficult to followthe information. If there were more than a handful of wines (certainly the case for a realonline wine store such as the Virtual Vineyard), it would be very difficult to understandthe information.

Look what happens when the same information is placed in a table. The results areshown in Exhibit A.9; the underlying HTML is shown in Exhibit A.10.

Table begin <TABLE>

Table End </TABLE>

Table RowBegin <TR>

Table RowBegin <TR>

Table Row<TR>

...

ColumnHeader<TH>...</TH>

Row Header<TH>...</TH>

Row Header<TH>...</TH>

...


Cell<TD>...</TD>

Cell<TD>...</TD>

...

...

...

...


Cell<TD>...</TD>

Cell<TD>...</TD>

......

Table RowEnd </TR>

Table RowEnd </TR>

Table RowEnd </TR>

...

EXHIBIT A.7 Displaying Text and Data WithoutHTML Tables

As Exhibit A.10 shows, the table is specified between the <TABLE BORDER=1CELLPADDING=5> and </TABLE> tags. The table is displayed with grid lines becauseBORDER=1 is utilized. The headers and cells of the table have a little extra space becauseCELLPADDING=5 has been added. The first row of the table consists of the column headers(i.e., Name, Description, etc.). Next is the row of data for the Merlot wine. This is followed bythe row of data for the Chardonnay wine.

Even though HTML 4.01 provides specific mechanisms for placing components at par-ticular locations on a page, HTML tables still remain one of the more popular methods forcontrolling the placement of various objects, including images, on a Web page. This is espe-cially true with the sites run by smaller merchants (such as the wine sites noted earlier). Withlarger EC sites, Cascading Style Sheets (discussed in section A.2) are used most often tocontrol placement.

Sending Information to the Web: URLs Versus FormsHow does a Web browser send information to a Web server? One way is by attaching “key-value” pairs to the end of a URL in an anchor tag. For example, reconsider the listing inExhibit A.9. Here, a user can add a wine to the shopping cart by clicking on the words “Addto Cart.” How does the Web server at the Web site “www.premiumselect.com” know that theuser has selected the Merlot or Chardonnay? Look carefully at the underlying anchor tags:

<A HREF=www.premiumselect.com/shoppingcart.exe?wine=merlot>Add to Cart</A><A HREF=www.premiumselect.com/shoppingcart.exe?wine=chardonnay>Add toCart</A>

When the user clicks either of these anchors, a request is sent to the Web server to run aprogram called “shoppingcart.exe.” A key-value pair (i.e., wine=merlot or wine=chardonnay)is attached to the request after the “?” mark so that the program knows the type of wine toadd to the shopping cart.



EXHIBIT A.9 Web Page with HTML Table

EXHIBIT A.8 HTML Tags for Data and Text Display<HTML><HEAD><TITLE>Wine Shop - Premium Selections</TITLE></HEAD><BODY BGCOLOR=“white” TEXT=“black” LINK=“black”><H1>Premium Selections - Wine Shop</H1><P>Selections from our wine cellar</P><B>Name: Merlot</B><BR>Description: A full bodied wine<BR>Price: $12.00 US<BR><A HREF=“www.premiumselect.com/shoppingcart.exe?wine=merlot”>Add to my shopping cart</A><BR><P><B>Name: Chardonnay</B><BR>Description: A light bodied white wine<BR>Price: $12.00 US<BR><A HREF=“www.premiumselect.com/shoppingcart.exe?wine=chardonnay”>Add to my shoppingcart</A><BR></BODY></HTML>


Passing parameters as key-value pairs attached to a URL works fine when there is asmall set of parameters and the specific values for those parameters are known in advance.However, most of the time there are many parameters and values that are not known inadvance. For instance, in our example, suppose we want to give the user the option to spec-ify the number of bottles to add to the cart. It is not possible to know the number ahead oftime. This is where HTML forms come into play. The page shown in Exhibit A.11provides users with a form that allows them to designate the number of bottles of merlotthey want to purchase. The HTML underlying this form is displayed in Exhibit A.12. Thevarious elements in the form are contained between the beginning <FORM> tag and theassociated ending </FORM> tag. This form has three elements. First is the “INPUTTYPE=TEXT” fields where the user types in the number of bottles of each type of wine tobe purchased. Next, there is a “SUBMIT” button (i.e., INPUT TYPE=SUBMIT). If theuser types in “2” for the number of bottles of merlot, when the user clicks the Submitbutton the key-value pairs “quantity_merlot=2” and “quantity_chardonnay=0” will be sentto the “www.premiumselect.com” server, which is designated in the “ACTION” field of the<FORM> tag.

A wide variety of form elements are available, including radio buttons, checkboxes, selection lists, text input fields, submit buttons, regular buttons, images, text areas,password input boxes, and reset buttons. A detailed discussion of these elements isbeyond the scope of this appendix. Readers are referred to Castro (2006) for a completediscussion.

EXHIBIT A.10 HTML Tags for Tabular Displayof Text and Data

<HTML><HEAD><TITLE>Wine Shop - Premium Selections</TITLE></HEAD><BODY BGCOLOR=“white” TEXT=“black” LINK=“black”><H1>Premium Selections - Wine Shop</H1><P>Selections from our wine cellar</P><TABLE BORDER=1 CELLPADDING=5><TR><TH>Name</TH><TH>Description</TH><TH>Price-$US</TH><TH>Shopping Cart</TH></TR><TR><TD>Merlot</TD><TD>Full bodied red</TD><TD>$12.00</TD><TD><A HREF=“www.premiumselect.com/shoppingcart.exe?wine=merlot”>Add to cart</A></TD></TR><TR><TD>Chardonnay</TD><TD>Light bodied white</TD><TD>$9.00</TD><TD><A HREF=“www.premiumselect.com/shoppingcart.exe?wine=chardonnay”>Add to cart</A></TD></TR></TABLE></BODY></HTML>


EXHIBIT A.11 Web Page with Forms

EXHIBIT A.12 HTML Tags for Forms<HTML><HEAD><TITLE>Wine Shop - Premium Selections</TITLE></HEAD><BODY BGCOLOR=“white” TEXT=“black” LINK=“black”><H1>Premium Selections—Wine Shop</H1><P>Wine Selections.</P><FORM ACTION=“www.premium.select” METHOD=POST>Name: Merlot<BR>Description: A full bodied wine<BR>Price: $12.00 US<BR>Number of Bottles to Order:<INPUT TYPE=TEXT SIZE=2 NAME=quantity_merlot VALUE=“0”><P>Name: Chardonnay<BR>Description: A light bodied white wine<BR>Price: $12.00 US<BR>Number of Bottles to Order:<INPUT TYPE=TEXT SIZE=2 NAME=quantity_chardonnay VALUE=“0”><P><INPUT TYPE=SUBMIT VALUE=“Add to Shopping Cart”></P></FORM></BODY></HTML>


HTML EDITORSWith earlier versions of HTML, it was easy to create Web pages with a basic text editor (e.g.,Microsoft’s Notepad) by manually typing in the content as well as the appropriate HTMLtags. Although many Web designers still rely on these simple tools, a larger number employspecialized HTML editors to create pages.

The editors are of two sorts. First are the specialized text editors. Among other features,these editors provide toolbars that enable easy insertion of common HTML tags. This over-comes the problem of remembering the names and syntax associated with the various tags, butit still requires manual entry. Included among this class of editors are the following commercialproducts:

◗ CoffeeCup HTML Editor (coffeecup.com/html-editor)◗ UltraEdit (ultraedit.com/index.php)

The second type includes Web authoring tools that support WYSIWYG (“what yousee is what you get”) visual design and layout of Web pages. Once a page is arranged, theunderlying HTML is automatically generated. In addition to visual layout, these programsalso support:

◗ Editing of the underlying HTML source code generated from the visual layout◗ Creating and maintaining an entire site in addition to individual pages◗ Editing and creating of images◗ Querying and updating databases◗ Developing and testing scripts to manipulate client-side objects and respond to client-

side actions

Among the better known authoring tools are:

◗ Adobe Dreamweaver (adobe.com/products/dreamweaver)◗ Microsoft Expression (microsoft.com/expression/products/overview.aspx?key=web)

Although the authoring tools make it easier to create aesthetically pleasing pages,designers still need to understand HTML in order to modify and maintain existing pages.

A.2 CASCADING STYLE SHEETSRegardless of their function, most e-commerce sites contain hundreds, if not thousands, ofpages. It usually takes a group of people to create and maintain these pages. Even with a groupof people, crafting these pages by hand is an impossible task. Consider the Amazon.com Website (amazon.com) as an example. Amazon.com sells thousands of items—books, CDs, elec-tronic devices, and so on. As you move through the site, the pages displaying the merchandiseare basically the same. They have a common structure and appearance. If Amazon.com onlysold a small number of products, then they might be able to manually create the pages aheadof time. However, they are unable to do so. For this reason, the contents of their pages—itemnames, descriptions, prices, customer comments, and so on—are stored in a database, thestructure and appearance of the pages are controlled by a set of template pages, and the pagesare generated automatically by a computer program or server-side script.

It is somewhat difficult to describe the exact structure of a template. Basically, think of atemplate as a Web page with a set of placeholders for the content. At the Amazon.com Web site,when a consumer moves to a page displaying a particular product, the page is dynamically pro-duced by a computer program (or server-side script) that retrieves the product information fromthe product database, accesses the appropriate template for that page, and fills in the place hold-ers with the appropriate content.The same strategy is used at most of the large sites on the Web.

In order to use this strategy, the contents of a page must be separated from its structure andappearance. Once this is done, templates can be used to create the look and feel of the pages.In setting up the templates, the people responsible for creating and maintaining the templateshave to decide on a common look and feel for the site. More specifically, they have to decide on


the appearance of the elements making up the pages—the headers, tables, form elements,buttons, paragraphs, and so on. In the vernacular of document processing, they have to decideon the style of the elements, including such features as colors, fonts, alignment, and the like.

It is possible to control the style of various elements using standard HTML, but doing sopresents some problems. First, the function, structure, and appearance associated with many of theHTML tags are intertwined. For example, header tags (e.g., <H1>) take a certain font size. Thespecific size that the headers take will depend on the different browsers and on the preferences setby individual users. Second, only a few HTML tags can be used to directly control the appearanceof various elements in a page. One of these is the <FONT> tag.This tag can be used to set the rel-ative size, family, and color of various text elements in a page. For example, consider the following:

<FONT SIZE=4 FACE=“Arial Bold” COLOR=“red”>Special Value Sales</FONT>

This will display the words “Special Value Sales” in a bold Arial font. The words will becolored red, and the size of the text will be slightly larger than normal (default is SIZE=3).Imagine that you had to insert <FONT> tags throughout a page to control the look of vari-ous elements. For instance, suppose you wanted all paragraphs to have a particular typefaceand size. Not only would this be tedious, but it also would be error prone, especially given thenumber of pages and the number of people working on those pages.

Cascading Style Sheets (CSS) is a well-supported and easy-to-use standard designed toaddress problems of this sort. CSSs are text files or special text in an HTML file that specifystyles for various elements in an HTML document. A style is a set of formatting characteris-tics that can be applied to any element so that its appearance can be controlled and changedeasily. When a style is applied to an element, a whole group of formats are applied at once.For example, styles can be used to control:

◗ The alignment, character formatting, line spacing, and borders of a paragraph◗ The font, size, and formatting (e.g., bold and italics) of selected text◗ The border, shading, alignment, and fonts in a table◗ The alignment, numbered or bulleted characters, and fonts in a list

CSSs serve to:

◗ Simplify the creation and maintenance of pages by eliminating the need to add detailedtags and attributes throughout a page and by making it easier to modify the look ofparticular elements by simply changing styles

◗ Enhance the richness of the design and layout of Web pages by offering enhancedpositioning and control over the elements of an HTML document

◗ Ensure consistency across the pages in a site, especially when multiple people areinvolved in the creation and maintenance of the pages

As an example of the way that styles might be used, consider Exhibit A.13, which definesa style for the body and “number 1 headers” for the Premium Selections homepage. Styles areusually defined in the head of a page and are denoted by the <STYLE> . . . </STYLE> tags.In this case, two styles are defined. Each style can be thought of as an instruction or rule thathas two parts: a selector (or HTML element) and a set of properties. In this instance, the firststyle states that the “BACKGROUND” color of the “BODY” will be white. The second saysthat all H1 headlines will use a 24-point font (FONT-SIZE: 24) and will be italicized(FONT-WEIGHT: ITALIC). The page that results from these styles is essentially the sameas the one shown in Exhibit A.1.

In practice, styles are usually placed in a separate file that is linked to a page rather thanphysically embedding the styles within a page. In this way, a set of styles can be applied tomore than one page or document, much like the style templates shared among MicrosoftWord documents. For instance, in our earlier example, we might have removed the stylesspecified between the <STYLE> . . . </STYLE> tags and placed them in a separate filecalled “mystyles.css.” The name of the file could be anything as long as it has a .css extension.In place of the <STYLE> . . . </STYLE> tags, we would insert the following tag:

<LINK REL=stylesheet TYPE=“text/css” HREF=“mystyles.css”>

Cascading Style Sheets(CSS)A standard that uses textfiles to specify formattingcharacteristics (styles) forvarious elements in anHTML document, allowingstyles to be controlledand changed easily.


EXHIBIT A.13 HTML Tags for Embedded Styles<HTML><HEAD><TITLE>Premium Selections</TITLE><STYLE>BODY {BACKGROUND:white}H1 {FONT-SIZE:24 pt; FONT-WEIGHT: italic}</STYLE></HEAD><BODY><P><IMG SRC=“premium.gif”></P><H1>Premium Selections</H1>Specializing in fine domestic wines and cheeses.<P><A HREF=“wines.htm”>Wine Shop</A></P><P><A HREF=“cheeses.htm”>Cheese Shop</A></P><P><A HREF=“shoppingcart.exe”>Review Shopping Cart</A></P></BODY></HTML>

We could do this for any number of pages, ensuring that the backgrounds and H1 head-ers would be treated the same across the pages. If we decided, for example, to change thecolor of the background or the size of the H1 fonts, then all we would have to do is changethe settings in the “mystyles.css” file.

Like the HTML standards, CSS standards are fairly involved and are controlled by theW3C (see w3.org/style/css). Besides Castro (2006), a number of tutorials are available on theWeb, including the introductions found at w3schools.com/css/default.asp and dezwozhere.com/links.html.

A.3 EXTENSIBLE MARKUP LANGUAGEStyle sheets simplify the task of creating and maintaining a consistent look and feel across aWeb site. This still leaves the issue of content management. HTML documents do not havestructured content. The content is simply interspersed among the tags in the page. This makesit difficult to create and maintain the content. It also makes it difficult for other applications,such as software agents, to use the content. To understand these difficulties, look at the codedisplayed in Exhibit A.14. (Remember that Web designers and software robots work withcode, not the actual display.) Now, answer a couple of questions. First, “What do these figuresrepresent?” You probably guessed stock prices. Second, “What was the closing price forMicrosoft stock (MSFT) on this particular date?” You can certainly determine this by lookingat the tags and content, but it requires effort. It would be even harder to write a program toextract the prices associated with the stocks contained in the table.The problem is that HTMLmixes the content with the display format and provides few clues to the meaning of the content.

Look at the code in Exhibit A.15 and try to answer these same questions. It is a pretty easytask to find the answers from this code. It would also be a relatively easy task to write a programthat understood the data. The code in Exhibit A.15 is written in eXtensible MarkupLanguage (XML). The XML standards are controlled by the W3C. Like HTML, an XML

eXtensible MarkupLanguage (XML)An open standard fordefining data elements.Like HTML, it uses a set oftags along with content(or values), but, unlikeHTML, the tags aredefined by the Webdesigner (i.e., there areno fixed tags).


EXHIBIT A.14 Mystery Table<HTML><HEAD><TITLE>Sample Table</TITLE></HEAD><BODY><H1>Prices</H1><TABLE><TR><TH>Ticker</TH><TH>Hi</TH><TH>Low</TH><TH>Close</TH><TH>Volume</TH></TR><TR><TD>MSFT</TD><TD>50</TD><TD>48</TD><TD>49</TD><TD>92500000</TD></TR><TR><TD>XYZ</TD><TD>80</TD><TD>78</TD><TD>78</TD><TD>100000</TD></TR></TABLE></BODY></HTML>

document is a text file with a set of tags and content (or values). Unlike HTML, the tags arenot fixed.This means that Web designers are free to create their own tags, which is why the lan-guage is called extensible. For any given page, the tags that are allowed and the manner in whichthey can be used are defined in a file called the document type definition (DTD). A DTD isbasically a set of grammar rules that dictate the makeup of the tags in a particular document.DTDs are optional and are used primarily for determining the validity of an XML document.

The tags in an XML document define the structure of the content. The tags inExhibit A.15 indicate that this is a collection of STOCKS. Each STOCK has a TICKER,HI, LOW, CLOSE, and VOLUME. The structure is arbitrary; no standard defines specifi-cally how stocks are to be reported in an XML document. Several domains have establisheda set of standard tags. The xml.org site, which was started in 1997 and is hosted by the non-profit consortium OASIS (oasis-open.org), seeks to advance the use of open XML standardsby providing educational information, collaborative resources, and discussion areas. Someexamples of the types of standards that are supported by XML.org include:

◗ Electronic Business eXtensible Markup Language (ebXML). A modular suite ofXML specifications sponsored by the United Nations Center for Trade Facilitation andElectronic Business (UN/CEFACT) and OASIS that enables enterprises of any size andin any location to conduct business over the Internet (ebxml.org).

◗ Business Process Execution Language (BPEL). An XML standard that enablesassembly of Web services into end-to-end business processes workflows that can be used

document typedefinition (DTD)In XML, a file that definesthe tags that are allowedand the manner in whichthey can be used; basi-cally, a set of grammarrules for the tags in aparticular document.


EXHIBIT A.15 XML Document of Information from Mystery Table

<?XML VERSION=“1.0” ?><?XML-STYLESHEET TYPE=“TEXT/XSL” HREF=“STOCKS.XSL”?><STOCKS>

<STOCK><TICKER>MSFT</TICKER><HI>51</HI><LOW>48</LOW><CLOSE>50</CLOSE>

<VOLUME>92500000</VOLUME></STOCK><STOCK>

<TICKER>XYZ</TICKER><HI>80</HI><LOW>78</LOW><CLOSE>78</CLOSE><VOLUME>100000</VOLUME></STOCK>

</STOCKS>

to support various business transactions and business interaction protocols. For example,BPEL could be used to describe the opening of a customer account.

Although XML has the same roots as HTML and is basically a child of the Web, anXML document says nothing about how the structure and content are to be displayed. Infact, XML is device independent. It can be displayed on any device, including browsers,printers, PDAs, and cell phones. One way to do this is with a specialized style sheet called aneXtensible Style Language Transformation (XSLT). Exhibit A.16 provides an example ofan XSLT file that produces an HTML tabular view of the output (seen in Exhibit A.17).Without going into the details, you should be able to recognize the table tags within theXSLT file in Exhibit A.16. The only major difference between a regular HTML page and anXLST file are the various XLS commands that appear in the file. For instance, the command<xsl:for-each select=“STOCKS/STOCK”> indicates that the display will loop through eachSTOCK in the collection of STOCKS and display a series of values designated by the<xsl:value-of select=“ ”> commands (e.g., <xsl:value-of select=“TICKER”>). Again, thedetails of XSLT are beyond the scope of this appendix. Those who are interested in thedetails are referred to the tutorials at w3schools.com/xsl/default.asp.

A.4 RICH INTERNET APPLICATIONS AND AJAXConsider, for a moment, the end user applications built on the Microsoft Windows desktop.These applications support a wide range of user interactions and usually provide instanta-neous response to those interactions. In contrast, most Web applications support a limited setof interactions and encounter slower response times because the application relies on theserver to do most of its processing. With most Web pages, when an end user clicks a buttonor makes an entry, the action results in a request from the Web browser to the Web server.The server then does some processing and, in turn, sends a response back to the browser. Allof this takes time, even for minor requests or processes.

Now, consider Web sites such as YouTube, Flickr, or Google—sites that have been classifiedas Web 2.0 sites. There is something different about many of these Web 2.0 sites. For example,try out Google Maps (maps.google.com). Google Maps, and other sites like it, are just as richand responsive as a desktop application. This is because these sites are built on Rich InternetApplication (RIA) frameworks and utilize a collection of tools and technologies known as Ajax.

eXtensible StyleLanguageTransformations (XSLT)A special type of stylesheet defines how the con-tents of an XML documentare to be displayed.


EXHIBIT A.16 Sample XSL Page for DisplayingXML Stock Report

<?XML VERSION=“1.0” ENCODING=“ISO-8859-1”?><XSL:STYLESHEET VERSION=“1.0” XMLNS:XSL=“HTTP://WWW.W3.ORG/1999/XSL/TRANSFORM”><XSL:TEMPLATE MATCH=“/”><HTML><BODY><H2>STOCKS</H2><TABLE BORDER=“1”><TR BGCOLOR=“#9ACD32”><TH>TICKER</TH><TH>HIGH</TH><TH>LOW</TH><TH>CLOSE</TH><TH>VOLUME</TH></TR><XSL:FOR-EACH SELECT=“STOCKS/STOCK”><TR><TD><XSL:VALUE-OF SELECT=“TICKER”/></TD><TD><XSL:VALUE-OF SELECT=“HI”/></TD><TD><XSL:VALUE-OF SELECT=“LOW”/></TD><TD><XSL:VALUE-OF SELECT=“CLOSE”/></TD><TD><XSL:VALUE-OF SELECT=“VOLUME”/></TD></TR></XSL:FOR-EACH></TABLE></BODY></HTML></XSL:TEMPLATE></XSL:STYLESHEET>

EXHIBIT A.17 HTML Output for XML Stock Report


RIAs are Web applications that have some of the same characteristics of graphical desktopapplications. They typically run faster and are more engaging than standard Web applications.They provide a better visual experience and are more interactive. Among the key features of anRIA are (Kay 2009):

◗ Direct interaction. In a traditional page-based Web application, interaction is limited toa small group of standard controls: check boxes, radio buttons, and form fields. RIAsprovide a wider range of control and enable direct interaction with page components(e.g., drag-and-drop).

◗ Partial-page updating. Standard HTML-based Web pages are loaded once. If youupdate something on a page, the change must be sent back to the server, which makesthe changes and then resends the entire page. RIAs provide the means to updatesegments or parts of a Web page without having to resend the entire page.

◗ Better feedback. Because of their ability to change parts of pages without reloading,RIAs can provide the user with fast and accurate feedback, real-time confirmation ofactions and choices, and informative and detailed error messages.

◗ Offline use. Depending on the framework used to build an RIA, it is sometimes possibleto work with the application offline.This is not possible with a standard Web application.

Most RIAs are created with special development platforms. Among the most popularRIA platforms are Adobe Flash/Flex/Air, Microsoft Silverlight, Google Gears, OpenLazlo,and Ajax.

The term Ajax, which was coined by a developer named Jessie James Garrett in 2005,stands for Asynchronous JavaScript and XML (Garrett 2005). Although the term wascoined in 2005, the technologies (e.g., XML) underlying Ajax were created a number of yearsearlier. The base technologies include a number of standards that we have discussed, such asHTML, XHTML, CSS, and XML, as well as some that we have not discussed, such asJavaScript, the Document Object Model (DOM), and a specialized object calledXMLHttpRequest. In the future, HTML 5 and XHTML 5 may provide the necessary fea-tures to build highly interactive applications incorporating video, sound, images, and anima-tions without resorting to specialized tools and technologies.

KEY TERMSCascading Style Sheets (CSS) 14Document type definition (DTD) 16eXtensible Markup

Language (XML) 15

eXtensible Style LanguageTransformations (XSLT) 17

REFERENCESBeaird, J. The Principles of Beautiful Web Design.

Melbourne, Australia: SitePoint, 2007.Castro, E. HTML, XHTML, and CSS: A Visual Quickstart

Guide. Berkley, CA: Peachpit Press, 2006.Garrett, J. “Ajax: A New Approach to Web Applications.”

February 2005. adaptivepath.com/publications/essays/archives/000385.php (accessed April 2009).

Harris, A. HTML, XHTML, and CSS for Dummies.Indianapolis, IN: Wiley Publishing, 2008.

Kay, R. “QuickStudy: Rich Internet Applications.”ComputerWorld, April 6, 2009. computerworld.com/action/article.do?command=viewArticleBasic&articleId=335519 (accessed April 2009).

McNeil, P. The Web Designer’s Idea Book: The UltimateGuide to Themes, Trends, and Styles in Website Design.Cincinnati, OH: How Books, 2008.

Suehring, S. JavaScript Step by Step. Redmond, CA:Microsoft Press, 2008.

Hypertext Markup Language(HTML) 2

Documents

WEB PAGE DESIGN AND CREATION - Pearson Educationwps.prenhall.com/wps/media/objects/8362/8562891/... · A WEB PAGE DESIGN AND CREATION APPENDIX Content A.1 HTML A.2 Cascading Style