The web has become one of the major ways people in all endeavors make known their work or wares. It is likely that you will publish a home page (or supervise people who do) in the course of your education or profession. This exercise gives you a feel for writing simple Web pages by having you use a couple of different approaches having to create your own Web page; if you wish, you can also publish it. You also obtain some direct experience with representational and presentational issues and their trade-offs.

The assignment is not conceptually difficult, but there are logistical details and pitfalls that can crop up, so do start it early, do the reading, and make use of on-line and TA help as needed.

Review pages 92 to 102 of Abernethy and Allen, which discuss the basics of HTML. Another good primer is at theWorld Wide Web Consortium HTML Tutorial page. There are loads of other HTML help documents on the Web; try typing “Learn HTML” into you favorite search engine.

• a copy of the Web page you produced in Word

• a copy of the enhanced Web page you produced via a text editor

• if you decide to publish your home page, a copy of the email message you sent the TA with the URL of your home page

Also be prepared to show your TA your page as it appears when viewed through Internet Explorer, should he ask.

To get full credit, your page must contain all the features and information we require and it must be presented in a fashion appropriate to its intended audience. (Anyone can look at a posted Web page, of course, but you’ll have in mind to whom you are targeting your page: they should find your page clear and well laid out.)

Web browsers like Internet Explorer (IE) display Web pages. A page is a text file with embedded commands that control how the page is to be displayed and processed. The comands as a group comprise a markup language, the most common of which is HTML, the (HyperText Mark-up Language). (HTML is one of a group of related languages that Web browers typically can interpret. HTML was the first and is the most restricted in what its commands will let you do. Still, HTML is quite powerful and more than sufficient for completing this assignment— so we won’lt be going into its newer, more full-featured, cousins.)

There are essentially two ways to “code” in HTML: indirectly, by using a tool that creates the code for you, such as a WYSIWYG word processor, and directly, by typing the HTML code.

WYSIWYG: With a WYSIWYG (What You See Is What You Get) word processor, you edit a document just as you normally would; when you save it, the word processor converts the document to text with the appropriate HTML so that a Web browser displays the page (as closely as feasible) to the way the word processor does. This means that you don’t have to worry about inserting HTML into your text yourself.

There are many such WYSIWYG tools available; for this assignment, we’ll use Microsoft Word.

The basic idea of HTML is to insert commands, called tags, into the “raw” text to indicate any special properties you want that text to have when it’s viewed in a Web browser. For example, the HTML source code One strong word produces the interpreted text (when using a typical browser)

We want you to create your own Web page. Do the first draft using Word, then create a more sophisticated version by editing the HTML code manually.

• Start Word. Click on New... from the File menu. From the New Document window that appears (on the right side of the screen) choose Web Page. Start creating your web page (obtaining as assistance from the book, the Web, Word's help utility, the TA and the instructor, as needed). Be sure it includes at least two hyperlinks (they could be links to your favorite movie, band, hobby, etc.) Add both a simple table and list (ordered or unordered). Remember that a Web page, like a well-written paper or well-given speech, is made up of related, topically connected information—it should not be just a hash of related facts and snippets. Play with the “look” of your page (by changing fonts, arrangement of information, etc.) to get a look you like and that IE will, in fact, replicate reasonably. Toward that end...

• Every so often, save your file (use the Save As Web Page... from the File menu). Then, open your file in IE and look it over to be sure that it is interpreting the HTML in a way you like. To do that, select Open... from the File menu; click on Browse, which will give a standard open dialog box; find and open your file (the HTML file you saved while in Word); its name will appear in the dialog box. Now click on OK; the page will display.

The page will probably look very close to what you saw in Word; Word's output has beeen designed to “play well” with IE (ot surprizingly, both are Microsoft products). But it’s likely it won’t be identical. If what you see is not what you want, change the HTML using Word to get it (as close to) what you want as you can. (You can tweak it much more precisely by editing the HTML directly; you’ll be doing that shortly. For now, stick with Word.)

• When you are happy with the content and format of your page, save it using Word. Make a copy of it; save one copy to turn in and use the other as the starting point for the manual editing of the HTML in your page.

• After you start editing a file in TextPad, do not try editing it in Word! Word could become “confused” and destroy your formatting!

• Before you begin this assignment, spend a few minutes cruising the Web, looking at other home pages, in both their interpreted and source code formats. Get a feel for what you think looks good and what doesn’t and the underlying code used to produce these looks. (You’ll note some looks are easy to achieve, and others not, requiring lots of complex HTML.) Obviously, if you see a “look” you want to use on your page, you can view the HTML source that produced it and place similar HTML into your page.

•It’s ok to link to text or images on other pages, but it may not be legal to copy them onto your page: they might be copyrighted works where the author’s permission is required before they can be copied.

•Remember this course is about information representation and presentation; it’s not HTML 101. The focus of your work (and our grading!) will be on the look and cogency of your page, not the amount or complexity of your HTML.

For potential extra credit, undertake some or all of the following:

Adding features and content: Include more information on your page, presented and organized well. Use advanced features of HTML to add animations, sound bites, etc. Remember that just throwing information on the page will not get you points; in fact, doing so might lower your score! You need a page that is cogent, with its information thematically tied and easy (and even fun) to read, listen to, or watch.

Tweaking your page for other browsers: The more elaborate your Web page, the more likely it will appear differently in different browsers. Even though there are standards for how HTML is to be viewed, you’ll find that different browsers sometimes don’t show the same HTML precisely the same way. Even one brand of browser will interpret the same HTML different on the PC, a Mac or a Unix machine. A professional Web designer often struggles to obtain a consistent look for web pages across browsers and platforms.

•Specifically program your page so that it does look the same in at least two different browsers (e.g., Firefox and Internet Explorer), or on two different platforms (e.g., a PC and a Mac). Note you won’t get extra credit if it just so happens your page looks the same in both contexts: you must make a directed effort to ensure they look the same (or as close as is possible).

Posting your page: “AntWeb” is where UCI stores student web pages. It is accessible only from on-campus computers. To get to AntWeb, link to ea.uci.edu. To add your page to Antweb, link to Getting Your Home Page on AntWeb and follow the instructions there. You can publish your page elsewhere, if you wish.

The instructions on AntWeb are accurate, but somewhat dated; you may want to ask your TA which of these instructions need to be followed directly, and which can replaced by other means that accomplish the same goal. For example, if you need to make some changes to your page after you have published it, you can edit it from your EA account using the pico editor, as described—but pico is not a editor for the squeamish! It would easier to copy the HTML source code back onto a lab computer, edit it there using the tools you’ve just practiced using, and then re-install it as described in Setting Up Your Web Area. Tools for moving things from a PC to the Web and back are much faster and easier to use than when AntWeb instructions were written.

• When your page has been published, send an email message to the TA, including in it the URL of your new home page. You’ll get credit for doing this part of the assignment “on time” if you publish your page, and email the TA that you did so, before the lab’s due date. (If your page is actually made available on Antweb after the due date, that won’t count against you.) Note that if you don’t email your TA that your page is published, you’ll get no (lab) credit for publishing it!