This week's standard lab includes the creation of a basic HTML webpage and a basic CSS external style sheet which demonstrate the range of the basic formatting properties found in CSS. Expect to do some typographical reverse engineering! You'll show your knowledge of properties relating to fonts, backgrounds, and general text formatting. Below are an example and instructions for the standard version of Lab 07.

an example of what your lab will look like

Standard Lab

  • HTML recreated
  • CSS recreated
  • Properties added as necessary (5 marks)
  • ADV 3 images and info (3 marks)

Part 1 - Create Your HTML

  1. Grab the lab07.html template.
  2. Put lab07.html into your labs folder and adjust the link element so it points to the CSS file you create in the next section. Aside from this change, you should not have to modify any of the HTML for this lab.
  3. Remember to put a link from your index.html page to your lab07.html page!

Part 2 - Create Your CSS

  1. Grab the lab07.css template, and place it with the other CSS files for your site.
  2. You will need to add new rules and properties (look inside the template to find out where) to the CSS file in order to have the HTML be presented as closely as possible to the background image which has been set for the paragraph.
  3. Once everything is working on your local copy of the website, upload the two files to your site
  4. Don't forget to test and validate your HTML and CSS files - I'll be checking both. Also, don't forget a link from your index.html to your new lab

Advanced Lab

One of the web development challenges we've discussed is that the user agent plays a big role in the presentation of our content. For the Advanced portion of the lab, take a screenshot of your work in three different browsers. Tastefully organize the three images, alongside relevant browser information, and make note of presentational differences you deem to be significant.