VISJ 321: HTML In Class #3

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?
Advertisements

One Response to VISJ 321: HTML In Class #3

  1. […] a more elegant and streamlined way of adjusting the style of our webpages (see the previous three weeks for review). The following instructions are based on this week’s Codecademy module: CSS: An […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: