English 384:PQQ - Writing for Electronic Media (Spring 2009)
Michael J. Cripps, Ph.D.

Hand Code Starbuzz Coffees

Subscribe to the RSS Feed

In order to complete this assignment, you will need to work through Chapters 1 & 2 in Head First HTML. It looks like a lot of pages, but notice all the pictures and the whitespace on each page. It's more like a workbook than a "book" in the traditional sense.

Your Task

Create a Four Page Website for "Starbuzz Coffee," a demo website introduced in Chapter 1 of Head First HTML.

  1. Create the "Starbuzz Coffee" index.html and mission.html files by following the instructions in Chapter 1.
  2. Use the instructions for modifying the "Headfirst Lounge" directions.html and elixir.html pages to build two more pages for Starbuzz (directions.html and coffees.html). Download the relevant Starbuzz pages and images in "Files You Need" below.
  3. Connect all four pages (index.html, mission.html, directions.html, coffees.html) to each other with hyperlinks by following the instructions in Chapter 2 and using the model established in the HTML code for coffees.html below. (Once you've created some HTML pages in step 1 you'll be able to figure this out. Hint: Look at the Unordered List under "Links" in the code for coffees.html.)
  4. Add the "coffeepress.jpg" image to the index.html file right after the H1 element.
  5. Put all the images in an "images" folder, making sure to update the <img> links so that they still display in the pages.
  6. Email Cripps the 4 HTML files so he can check your code. Be ready to show the class your work!

A successful website will have four pages (index.html, mission.html, coffees.html, directions.html), working links on each page, 4 images (cappuccino.jpg, houseblend.jpg, latte.jpg, tea.jpg) on coffees.html, and one image (coffeepress.jpg) on the index.html page.

Bonus Task: Add a hyperlink to the bottom of each page ("http://york.cuny.edu") that takes the viewer to the York College website (p. 144 in Head First HTML).

Files You Need

Right-click or control-click and choose "save link as" or "save target as" to get the following files onto your computer.

  1. directions.html
  2. coffees.html
  3. latte.jpg (belongs on coffees.html page)
  4. houseblend.jpg (belongs on coffees.html page)
  5. cappuccino.jpg (belongs on coffees.html page)
  6. tea.jpg (belongs on coffees.html page)
  7. coffeepress.jpg (belongs on index.html page)

Images of Success (without the bonus)

screencap of starbuzz index page

screencap of starbuzz mission page

screencap of starbuzz directions page

screencap of Starbbuzz coffees page

What You Learn Here

Don't like the look? Restyle!
Dr. Reid | Produce | Wikiwiki | Escher | Cloisonne | The Blues | Negative | Skinless

cripps@york.cuny.edu  |  ac-2a02 |  718.262.2496  | tues after class