VISJ 321: HTML In Class #4

April 14, 2014

Today we learn about CSS, 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 Overview:

As always, remember these basics for coding and previewing your work:

To preview in TextWrangler:

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

Complete these instructions:

  1. Create a WWW folder (or use your previous one). In TextWrangler, create two files: “index4.html” and “stylesheet.css” – save BOTH to your WWW folder.
  2. Add structural tags and a <title>
  3. In your HTML: Create a first-level heading and two paragraphs of text; make the second paragraph a different font; add a hyperlinked word; create a <div> of any size and color
  4. In your CSS:
    1. Change background color of <body>
    2. Make the font size of <h1> 36px
    3. Make your <p> red
    4. Give your <div> a border of 1px and a background color of blue
    5. Create a comment
  5. In your HTML, link to the CSS (three parameters, end with /) – Preview in your browser
  6. In your HTML, add a second <div></div> tagset – what happens?

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?