Discography Part 1 Overview

You will create a small website that showcases a band’s album releases.


Pick a band that has at least 4 releases and at least two band members.

Find the band members names' and a little background information about them. You can use information found on the Web or other sources. Just make sure to cite and link to your source.

For each of 4 of their albums, find the title, track listing, and cover art.

Gather, edit, and organize copy. Make sure that you keep a record of your sources. Add the appropriate content to your HTML documents. Keep reading to know what copy you need to gather, edit, and organize.

Create 2 html files:

  1. index.html
  2. discography.html

Add your DTD, character encoding, and basic markup for an HTML document.

Create appropriate titles for each section of your content.

About page should have:

  • Band name
  • Background information
  • Unordered list of band members
  • Table with 2-columns

    1. Year
    2. Album titles (eventually you will be replacing the titles with album art)

Discography page should have, for each album:

  • A div with a unique id
  • Inside the div have:
    • Title of album
    • The album cover art
    • Ordered list of track listing
    • Link (Back) to about page

Markup the content in your HTML documents.


  • Download the images off the Web. Check amazon.com and wikipedia.org.
  • Save your images using the album name into an "images" folder within your site folder. Remember no spaces or capitalize letters. Should like this: album_name.jpg
  • Make sure that all of your images are the same size, for example 500px x 500px.
  • Then use Photoshop to create thumbnail versions of your album covers. These thumbnails should be 100px x 100px. Save for Web. Name your thumbnails like this: tn_album_name.jpg
  • Remember to add your width and height dimensions to your img.


  • To do this assignment, you will need to read about div, id, and table. You will probably need to review the readings and materials we have already gone over.
  • There are times when it is appropriate to not include alt text. Some of these times are in this assignment. Think about the information that you are providing and how you do not want a screen reader to read the same thing two times in a row.
  • This project does not focus on you writing your own content. It is imperative that you understand that copying and pasting copy that someone else has written, without their permission, is not acceptable in the professional world. Nor is it acceptable in most class situations. We are using information for this assignment from sources like wikipedia.org. None of you will claim this to be your own copy. You will cite your source(s). You will link to your source(s).
  • Make HTML entities where appropriate.
  • Use the Web resources we have reviewed in class. For example, John Gruber’s Markdown Dingus.
  • Think about repetitive actions and how you can make your work process be more efficient.
  • As always, keep your presentation separate from your content.