–– workshop home ––

Workshops

Web 2 Exercises

Exercise 1: Tables

Use this file: tablesample.html. Transfer it to your desktop and open it in your editor.

Add a <caption> that says: Sample Table for Web 2 Workshop

Add the following column headings:

Define a thead, tbody and tfoot.

Add a new row at the bottom. Have it span all the columns. The text should read: This is a row in the tfoot section that is supposed to span all the columns

Check your work in Print Preview. You should see that the column headings repeat on the second page.

Exercise 2: First Stylesheet

  1. Make a new folder, called styles
  2. In HTML-Kit, make a new plain file and call it main.css
  3. Add this code to main.css
    body {
      font-family: arial, sans-serif;
    }

Transfer the file ex2.html to your desktop and open it in HTML-Kit

In the head section, make a link to the stylesheet
<link rel="stylesheet" href="styles/main.css type="text/css" media="screen" />

Check your work in your browser.

Exercise 3: Font-Family

Change the font for the entire page
body {
  font-family: verdana, sans-serif;
}

Now set the font for just the main heading
h1 {
  font-family: "Courier New", monospace;
}

And set the font for paragraphs only
p {
  font-family: times, "Times Roman", palatino, serif;
}

Try this one
p {
  font-family: pristina;
}

What do you get?

Try changing it to
p {
  font-family: pristina, cursive;
}
or
p {
  font-family: ravie; fantasy;
}

Remove all font-family settings. Set body font to arial or sans-serif.

Exercise 4: Font Styles

  1. Make the h1 heading in normal font
  2. Make the h2 heading italicized
  3. Make the h3 heading in small-caps
  4. Make all list items boldfaced

Exercise 5: Font Size

  1. Make h1 be 2.5 times larger than the default
    h1 {
      font-size: 2.5em;
    }
  2. Make list items be 0.8 times normal size.
    li {
      font-size: .8em;
    }
  3. Set the body font size for the entire document to be .8em
    body {
      font-size: .8em;
    }

What happened to the list items?

What happens when you don't specific a unit of measurement? Try it on the body font size. Just remove the "em".

Experiment more. When you are done, set the body font to Palatino or Times, the h1 tag to normal weight and 2.5 times normal size, and the h3 to small-caps.

Exercise 6: Units of Measurement

Experiment with different units of measurement. An easy one for comparison is to style paragraphs with one unit and a list with another unit. For example:
p { font-size: 150%; }
li { font-size: 1.5em; }
Now try
p { font-size: 15pt; }
li { font-size: 15px; }

What happens when you size the font up and down with your browser? (in IE, choose View, Text Size, … in FF just use Ctrl-+ and Ctrl--)

Exercise 7: Text Alignment

Right-align h2
h2 { text-align: right; }

Center h1

Exercise 8: Color

Set a dark background color
body { background-color: #500;}
Oops! We now need to set a light foreground color.
body {
  background-color: #500;
  color: #fff;
}

Here are some other colors to try

h1 { color #ff4; }
p { 
background-color: #f7e4dd;
color: #000;
}
a { color: #8cc; }

Try setting colors for h2 and h3. For h2, make a different background color.

Exercise 9: List Styles

Make unordered lists use circles

Make ordered lists use upper-case letters

Now turn off all bullets and numbering on all lists

Final Exercise

Close all open programs; I want you to start from scratch.

Use the ex2 file from the workshop website

Add the following:

  1. A second-level heading of your name
  2. An image, from the /images folder, in the second paragraph
  3. Links to these files on the workshop website:
    • unitsofmeasurement.html
    • textalign.html
    • lists.html
  4. Add a link to a main.css stylesheet into this file (ex2.html)

Add the following styles

  1. everything in Arial
  2. Set the background color of the page to some light color
  3. Make the level 1 heading a different color, centered
  4. Make the level 2 heading so that it is not in bold face, centered
  5. Make the level 3 headings in small caps
  6. Use circles for the bullets on unordered lists