DIGI 110 Lab
Images and Folder Structures

Due Before Next Class

Go Back to Labs Page

STANDARD (75% marks):

By completing this lab students will demonstrate:

ADVANCED (+25% Marks):

By completing the advanced portion of this lab students will demonstrate:

STANDARD: Prepare...

  1. Open your template.html file
  2. Save the new file as animals.html into your DIGI110 folder.
  3. Change the title of the new file to say "About Animals"
  4. Leave Brackets open.

Basic Folder structure

  1. Go to your DIGI110 folder
  2. You should already have last weeks lab file in there called "index.html". If you didn't name last weeks file that... rename it "index.html".
  3. "index.html" is the traditional name of the first page of a website.
  4. Create a new folder inside your DIGI110 folder called labs.
  5. Move your animals.html file into the labs folder.
  6. Your DIGI110 folder should now look like this:
    Image of the folder containing the index file and labs folder
    If you don't have the booking picture in there that's OK!

Create content and links

  1. Open animals.html in Brackets.
  2. Like we did last lab, type in some basic text (about animals you have or had or like?) inside the body element and mark it up with headings (h1, h2, h3, h4, h5) and paragraphs (p).
  3. Create a link to the index page.
  4. In order to reference a file that is in a directory "above" the current directory, we use ../ eg: href="../index.html"
  5. Make sure all links work.
  6. Check both the index.html and animals.html files at: http://validator.w3.org/nu/
  7. Once both are green, move on.

Link from the Index Page

  1. Open index.html in Brackets.
  2. Create a link to animals.html
  3. Don't forget to put the name of the folder inside the href attribute. eg: href="labs/animals.html"
  4. Check that the link works.

Cat Picture!

  1. NEW: Save the image below to the labs folder inside your DIGI110 labs folder. A Cat on the Stairs
  2. Resize it so that it is as close as possible to 700 pixels wide but still proportional!

    On Mac: Double-click the image to open it in "Preview" resizing is under the Tools menu

    On PC: Right-click the image and "Open With--> Microsoft Paint" resizing is on the left bar.

  3. Take note of those image dimensions!
  4. NEW: Add an <img> element to your Lab 3 file to make the image appear on your webpage.

    <img src='yourimage.jpg' height='###' width='###' alt='A Picture of My Black Cat' />

  5. Does your image appear? Once it does... Validate! http://validator.w3.org/nu/.
  6. Once both are green, move on.

ADVANCED Lab

  1. Find a picture of Disney's Mickey Mouse character
  2. Insert it correctly into your animals.html page. (Make sure you validate the page!)
  3. Make a link so you can click the picture and go to www.disney.com

YOU MADE IT! Submit your Lab...

  1. Compress or Zip the DIGI110 folder. (Right-click on the folder--> Compress) Don't worry, it will compress everything inside!
  2. Submit it to the Dropbox

Go Back to Labs Page

Checked HTML5

Valid CSS!