Special Characters

Note: the following material is from an older, outdated version of the web design curriculum pack. Please read about the revised and updated version of our Introduction to Web Design Curriculum.

Objectives

At the end of this lesson, you will be able to:

  • Display tabular data in a web page
  • Apply styles to all elements in a web page
  • Apply styles to particular elements in a web page
  • Use special HTML characters

Instructions

  1. Create a new folder called Special Characters.
  2. Copy the Skeleton from the class website and paste it into a new Notepad file.
  3. Save the file as characters.html. Make sure this file is saved in your Special Characters folder.
  4. Give your website an appropriate title which includes your name.
  5. Create a table with 11 rows and 2 columns, and fill the table with the following content:
  6. Use the HTML Symbols Reference to locate the entity names.
Result Description
quotation mark
apostrophe
& ampersand
< less-than
> greater-than
  non-breaking space
¢ cent
© copyright
® registered trademark
trademark
  1. Add a <style type=”text/css”></style> element within the <head></head> element of your web page. Apply the following styles to your webpage:

For EVERY CELL:
There should be no borders
The font family should be something other than Times New Roman.

For the FIRST ROW (heading):
The font weight should be bold.

For the REMAINING ROWS:
Rows should alternate between darker and lighter shades of the same color. Use two separate CSS classes to do this.

Styling Hints

  1. Go to http://www.w3schools.com website and click the “Learn CSS” link in the upper left to see examples of styling your website elements.
  2. Make up a different class name for each component of your website. Here are the classes you will need to use:
    td
    .header
    .lightRow
    .darkRow
    
  1. Style each of these components separately. Add the appropriate class names to your XHTML elements. Example:
    <tr class="header">Header goes here</tr>
    

Styles You Will Need to Use

border-style
font-family
font-weight
background-color

Table Hints

  1. Go to http://www.w3schools.com website and click the “Learn HTML” link in the upper left to see examples of creating tables in XHTML documents.
  2. Build the table one row at a time. Make the header row first, and then the other rows.
<table>
<tbody>
<tr>
<td>Result</td>
<td>Description</td>
</tr>
<!-- Additional rows follow --></tbody>
</table>
  1. Apply the classes (styles) you’ve made to the correct row after you’ve made the table.Exmaple: <tr class=”lightRow”>
    This will apply your lightRow class form your CSS <style> section just to this row.

Screenshot

XHTML Special Characters

Rubric

Component Possible Points Score
The table contains ten special characters and descriptions of those characters 4
The table has no borders 2
The font family is NOT times New Roman 2
The font is bold in the header row 2
Each row alternates between light and dark background colors 2
The assignment was submitted on time (20% off for each day late)
Total Score 12

For full projects and source code, download the updated version of our Introduction to Web Design Curriculum.