This week's standard lab includes the creation of a simple HTML webpage that demonstrates semantic markup, basic HTML formatting, and the use of images in HTML. An example and instructions for the Standard version of Lab 02 are below.

A Primer on Ambient Music

by Robin

Reviews of music in magazines are often very challenging to interpret. Often, the writers spend more time talking about the afterhours antics of the performer, or the reception of the previous album. You'll read things like, this is a return to form for artist X, as opposed to detailed descriptions and evaluations of the music. Sometimes, I find it's more fun reading about music you already have know, as opposed to browsing reviews with the intent of discovering new music.

For whatever reason, many years ago a few sentences in a copy of Keyboard Magazine caught my eye. Of course the review didn't describe the music, specifically. Instead, it itemized a number of diverse, seemingly unrelated elements, locations, possibilities. Ingredients. There was also a suggestion that these disparate elements were seamlessly integrated. Well, this was an album I had to have. After a trip to Dr. Disc, I had my first taste of Adventures Beyond the Ultraworld, the debut album from the Orb.

The Orb Adventures Beyond the Ultraworld
album artwork

One thing which has been discussed before on this show is latent recognition of audio samples. I first listened to Ultraworld sometime in 1991, but many of the album's components were not clear to me until a number of years later. The unstated auditory bibliography used to build Ultraworld makes for some fantastic electronic music lineage listening.

Standard Lab

  • Main index page
  • Image element
  • 3 heading & p elements
  • 5 other elements from lect.
  • Link from "index" to lab
  • Relative addresses used
  • Lab02.html is valid
  • ADV: 6 images added (jpg, gif & png)
  • ADV: Results shown on webpage
  • ADV: Polish Provided to Adv lab

Part 1 - Organizing Your Files

  1. On your site, if you havent already, create a folder at the root level called labs - this is where you will put all your individual labs
  2. On your site, inside your labs folder, create a separate folder for your images called images. Make sure your images folder is inside your labs folder, not at the root level!
  3. Upload an image to your images folder

Part 2 - Create Your Lab02 Web Page

  1. Use a template, and create a new doc titled lab02.html
  2. Open lab02.html, and add some content on any topic you choose. Be sure your page includes the following:
    • an image (loaded in your images folder so it will need a src something like src="images/mypic.jpg")
    • at least 3 heading elements
    • at least 3 paragraph elements
    • at least 5 other HTML5 elements from the lecture notes this week
  3. Note: It's safer to work locally, and then upload the page to your site when it is finished. Don't work on the page on the server unless you're very sure about what you're doing!
  4. Upload your lab02.html page to the labs folder in your site. Create a link - on the index.html page you created last week - to your new page titled lab02.html Note: lab02.html is going to be inside the labs folder, so the link will need a relative address to find the file in that folder (href="labs/lab02.html")
  5. Your finished webpage must be fully valid (use the W3C validator). Remember, it is easier to work incrementally and validate as you go. Don't leave it until the end. Make sure that I can view your lab02.html by following the link from your index.html page

Advanced Lab

To complete the advanced lab, you must take a continuous tone image (a photograph) and a flat color image (a cartoon or poster with large areas of flat color), and use an image program to save each of these two images as a JPG, a GIF and a PNG. Note how large each image (file size) is, and any visual differences between the files; put this information and the images themselves in your lab. (Remember to validate your lab after you make these additions!) Note: If you do complete the advanced section of this lab, be sure to indicate this in the title you give your lab (i.e. Lab 2 Standard & Advanced).