HTML and CSS

Tinkering

This exercise requires some experience with HTML. Before we plan anything for our students we need to take the digital tools for a spin.

  1. Try the W3 School's HTML tutorial and HTML example pages.
  2. Have a look at some html on the web
  3. Open Firefox, Chrome, or Internet Explorer
  4. Put http://web.uvic.ca/victorianreview/ or the address for this page, http://constancecrompton.com/2013/udel_workshop/html.html, in the address bar
    • In Firefox open Tools>Web Developer>Inspect
    • In Chrome open View>Developer>Developer Tools>Elements
    • In Internet Explorer open Tools>Developer Tools. Hit Ctrl + P to bring the tools into your current browser window
  5. Think through how you might organize your image, HTML, and CSS files. Here is a sample directory structure:
  6. Download the sample html structure from Constance and try writing some of your own html using NotePad (pre-installed on all PCs), TextEdit (pre-installed on all Macs) or on a free trial of a text editor such as Sublime

The Assignment

Learning Outcomes

What will students who have learned successfully from this assignment understand or be able to do?

Plan the Assignment

What are the steps in this assignment? What will the content of the student's pages be? How will the students experiment, build, and then communicate their work? How does this assignment fit in with the rest of the course?

Rubric

Design a rubric that clearly articulates fair, good, and excellent process, product, and argument. Link the evaluation to the learning outcomes.

Tutorials and Guidelines

Cultural Context

home