VISJ 321: HTML In Class #3

April 2, 2014

Building on the previous two weeks, today we’ll play with tables and divs (learned in this week’s Codecademy module: Web Fundamentals: HTML Basics III):

Remember these basics for coding and previewing your work:

To preview in TextWrangler:

  1. In Chrome, go to File > Open File… and open “index2.html”
  2. Command-Tab to select TextWrangler and write code
  3. Command-Tab to select Chrome and Command-R to refresh your webpage

You’ll do the following:

  1. Use/create WWW folder; create “index3.html”; add structural tags and a <title>
  2. Create a first-level heading
  3. Create a table with three rows and three columns
  4. Give your table a 2px border
  5. Give it a header row
  6. Below your table, create a <div> – make it 100px wide, 50px high, and give it a color.
  7. Turn your div into a clickable link.

Too smart for all this? See if you can…

  1. Change the background color of a row or cell in your table?
  2. Get rid of your table’s borders? Give your div a border?
  3. Put text in a div? Center that text horizontally? (note: vertical is kind of complicated at this point)
  4. Give your div a border? Give it rounded corners to look more like a button?