Hand Code Starbuzz Coffees
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.
- Create the "Starbuzz Coffee" index.html and mission.html files by following the instructions in Chapter 1.
- 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.
- 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.)
- Add the "coffeepress.jpg" image to the index.html file right after the H1 element.
- Put all the images in an "images" folder, making sure to update the <img> links so that they still display in the pages.
- 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.
- directions.html
- coffees.html
- latte.jpg (belongs on coffees.html page)
- houseblend.jpg (belongs on coffees.html page)
- cappuccino.jpg (belongs on coffees.html page)
- tea.jpg (belongs on coffees.html page)
- coffeepress.jpg (belongs on index.html page)
Images of Success (without the bonus)
What You Learn Here
- Basic HTML structure and key elements of HTML, HEAD, BODY, H1, H2, PARAGRAPH (create index.html and mission.html)
- Basic insertion of images into a webpage and IMAGE element (add coffeepress.jpg to index.html)
- Creation of basic relative links and ANCHOR element (create hyperlinks in each page, using coffee.html as starting point)
- Adjustment of paths through file structure (adjust image links after moving images into an images folder)
- Diffference between Relative and Absolute paths in a hyperlink (bonus task)
Don't like the look? Restyle!
Dr. Reid | Produce | Wikiwiki | Escher
| Cloisonne | The
Blues | Negative | Skinless