DIGI 110 Lab
Menus and CSS

Due Before Next Class

Go Back to Labs Page

STANDARD (75% marks):

By completing this lab students will demonstrate:

ADVANCED (+25% Marks):

This Lab includes an optional Advanced section where students:

STANDARD: Prepare...

  1. Open your Template.html file in Brackets
  2. Before starting, Save the File As vacations.html in the labs folder.
  3. Open your index and other lab files in Brackets too. You'll need to work on them all today.

The Work...

  1. Create Content in your vacations.html file like we have in previous labs. Create a few paragraphs describing vacations you've taken or places you've visited.
  2. Use the elements we've used before to mark up your content.
  3. NEW:Now create a list of links to all your labs (including todays!).
  4. To start a list you open a <ul> or <ol> element to choose either an unordered (bulleted) or ordered (numbered) list.
  5. Each item (in this case, a link) in your list should be wrapped inside an <li> element.
  6. Don't forget to close the <ul> or <ol> you used at the start of your list
  7. Your finished list should look similar to this:

    <ul>
    <li><a href="../index.html"> Home Page </a></li>
    <li><a href="lab6.html"> Lab 6 </a></li>
    <li><a href="vacations.html"> Lab 7 </a></li>
    </ul>

  8. You should now have the beginnings of a 'menu'. Validate! http://validator.w3.org/nu/ and http://jigsaw.w3.org/css-validator/
  9. Once both are green, move on.
  10. NEW:Now copy and past your list 'menu' onto your other webpages. You will need to modify the <a> elements a little so that they all point to the right place.

Introducing CSS!

  1. In today's lab, create a new <style> element at the top of your page inside the <head> element (right before the closing </head> tag. )

    <style>

    identifier { property:value; }

    </style>

  2. We want to change the background of the whole page to be red? How do we do that?
  3. The identifier tells CSS what part of the HTML page to affect. An element that encompasses the entire webpage is?
  4. The <body> element.
  5. replace the word "identifier" with body
  6. replace the word "property" with background-color
  7. replace the word "value" with red;
  8. The background of your webpage should now be red!
  9. You can add more property/value pairs inside the curly braces to change more things about that element
  10. You can create more identifier {property:value} blocks inside the sytle element to change more elements in the webpage.

ADVANCED: CSS Challenge!

Use this resource to help you: http://www.w3schools.com/cssref/default.asp
Create the following 4 CSS rules in your style element.

  1. Create a CSS Rule that creates a blue border for your paragraph.
  2. Create a CSS Rule that changes the colour of a <strong> or <em> element.
  3. Create a CSS Rule that changes the font-size of any <h1>, <h2>, or other heading element.
  4. Create a CSS Rule that inserts a background image in your document.

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!