Projects‎ > ‎Word‎ > ‎

Our Favorites

This project is the online version the earlier project of the same name made with Word (Our Favorites). In both projects, a collection of favorite websites is organized into a list, automatically numbered, and made clickable so that the websites can be conveniently visited. The Word version required local copies of both the document (OurFavorites.doc) and the application (Word.exe). These prerequisites can be inconvenient or difficult to fill when web browsing, especially on a borrowed computer. Why not put those links on the web where one is headed in the first place. In this project you will do that and more. You'll include the same content as in the Word version, but also experiment with the form.


  1. You have been provided with printouts of the source code of two files, OurFavorites.html and OurFavorites.css along with printouts of how the former file looks in Internet Explorer with either of its styles. At the end you should submit files with these names and substantially same structure, but with your own content. One way to achieve this is to type in all of the content of the printout and then go back and substitute your content. If during typing you notice exactly where yours will fit, go ahead and substitute right away.
  2. The formatting should be essentially the same as the Word document. Above and below there is one column and the lists appear in two columns. That is achieved in this case with a table. Include your own title, two column headers, at least four or more favorite websites apiece in a numbered list, and a final paragraph that shows an unlinked website that you don't like.
  3. Unlike the Word version, this HTML document includes a button which you can use to change the style/form while the content remains unchanged. Other differences are that you must use a pseudonym rather than your real name. We will put your creation on the internet and want to keep our class membership private. Logically, the mailto link for your name should not be your real email address. Web crawlers search the internet collecting email addresses to use for advertising and other purposes and you don't want to collect lots of junk mail. Use an address that is obviously fictitious such as Click on your other links to ensure that they work.
  4. After your content is entered, ensure that the button works. The JavaScript code that controls the style is case sentitive and spacing can make a difference. After you are sure it works, make some changes that allow a third style, your own, to be used. Change the line in OurFavorites.html that begins var styles=... to var styles=["plain","expressive","ours"]; Next, change the line beginning with toggle=(toggle... to toggle=(toggle+1)%styles.length; When you press the button, the style should now switch between three different forms.
  5. Now look again at OurFavorites.css. Copy all the lines containing expressive and paste them in again below all of the other text. In the copied portion change every occurrence of "expressive" to "ours". This is the area you have to define your own style. Experiment a little. If you see a word, try its opposite. If you see a color, pick a different one. If you see a number, change it and observe what effect it has. You are editing a Cascading Style Sheet about which thick books have been written, so we will only scratch the surface. Parts of two quick references documents will be distributed in class: this and this. We may look at this in more detail in the future and you are welcome to study CSS tutorials.


Attach both documents, named exactly as specified in the first instruction, to a single email message or submit both via USB drive. Include the name of your partner in the email.


There is a point for each of the technical requirements embedded in the list above. Your pages will be displayed on the class website, so be sure they are something you can be proud of.

  • 1 OurFavorites.html
  • 1 OurFavorites.css
  • 1 Title
  • 2 Columns
  • 2*2 Two headers with pseudonyms and links
  • 4*2*2 Four favorite websites per column with name and link
  • 1 Final paragraph
  • 2 Edits to toggleStyle
  • 1 Copy of expressive styles
  • 1 Rename to ours
  • 2 Edits to ours
  • 1 Delivery