HTML 2

This is a continuation from HTML 1.

Learning Objectives

(See p. 71) Be able to:

Images

For displaying pictures in your web page. Example:

<img src="whale.jpg" alt="a blue whale" width="200" height="50"/>

XML rules: attribute values should always be quoted, using "..." or '...' quotation marks (not “smart quotes”).

Here’s an example — to see the HTML code, use the browser’s view source command (Firefox: right click, view page source, or Ctrl-U):

Tables

Example:

<table>
  <tr>
    <th>Name</th>
    <th>Color</th>
  </tr>
  <tr>
    <td>Jack</td>
    <td>Blue</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Green</td>
  </tr>
</table>

Appears as:

Name Color
Jack Blue
Jill Green

Style

Let’s begin with an example.

  1. Download and study the HTML file (web page) css-example.html.

    1. The <link ...> element refers to a style sheet which is a separate file. This is much like an <a href> element, but instead of letting you click to go to another page, it includes the style rules from the other file into this page.

    2. Some elements have an id attribute. This can be used to identify elements in the style rules. No two elements are allowed to have the same id value within a page!

    3. Some elements have a class attribute. This also can be used to refer to elements in the style rules. But in this case, it is okay to have many elements with the same class value.

  2. View the downloaded HTML file in your browser. It looks pretty plain. That’s because the style file referred to in the link element doesn’t exist.

  3. Let’s create the style file, one rule at a time. Eventually we should have something like this: css-example.css.

  4. Validate the HTML page and the CSS file

See also CSS Notes.

The style language is called Cascading Style Sheets (CSS). The style describes the presentation desired for the document; usually this means appearance, but it could be sound, if the computer reads the document to a visually impaired person.

There are three ways to incorporate CSS into a web page:

  1. Any element (at least any element which is going to be presented) may have a style attribute, which specifies one or more style properties and their values.

    Example:

    <p style="color: red; font-weight: bold;">He said WHAT?!</p>

  2. The head of the web page may contain one or more style elements containing embedded style sheets.

    Example:

    <head>
  ...
  <style type="text/css">
    INSERT STYLE RULES HERE
  </style>
  ...
</head>

    These style elements contain style rules, which we will describe shortly.

  3. The head of the web page may contain one or more link elements that hook up the web page to external style sheets.

    Example:

    <head>
  ...
  <link rel="stylesheet" type="text/css" href="site-style.css"/>
  ...
</head>

    These external style sheets contain style rules, like those in style elements.

I usually prefer the third way, an external style sheet, because it is very easy this way for all the pages on a site to share a common style: just link them all to the same style sheet. And if you want to fix up the style, you only have to fix it up in one place.

Now, what are these style rules like? Here’s an example:

p { color: red; 
    background-color: black;
    font-weight: bold;
}

This rule begins with a selector, p, which says what kind of elements it will apply to.
There are many kinds of selectors, but the simplest kind is just the name of an element (here, p for paragraph).

Following the selector is a list of properties (name: value;), enclosed in curly braces ({, }).

A Sampling of CSS Properties

General Properties

Properties of elements of any sort.

Block Properties

Block display elements are those that get, generally, a rectangular display area. They have a “box.” Most of the elements we have covered are of the block display type. Exceptions are inline display elements (em, strong), and list-item display elements (li, etc.).

Here are some properties you can set for elements that are block displayed.

Text Properties

Properties of text content or attributes.

A Sampling of Selectors

Besides the element-name selectors, there are many other kinds. We will consider just two more in this course: selecting elements by the attributes class and id (identity).

Selecting Elements by Id

An HTML element can be given a unique ID attribute:

<p id="par1"> ...</p>
<p id="par2"> ...</p>

Style rules can match the ID attribute with selectors such as:

p [id = par1] { ... }
p#par1 { ... }
[id = par2] { ... }
#par2 { ...}

Selecting Elements by Class

HTML element can be given a class attribute; multiple elements can share the same class value:

<p class="humor">A funny thing happened on the way to the forum ...</p>
<p class="humor">And the next day he said, ...</p>

Style rules can match the class attribute with selectors such as

p [class = humor] { ... }
p.humor { ... }
[class = humor] { ... }
.humor { ...}

Example: TO BE ADDED

Centering Images

This is a little tricky. In older versions of HTML, you could just write <img align="center" ...>, but in HTML5, the align attribute is no longer allowed.

The CSS text-align property only applies to text, so that won’t help.

It turns out that a CSS rule specifying display: block; margin: auto; does the trick. You can also specify a width, either as pixels (no units) or as a percent:

img {
    display: block;
    margin: auto;
}

or

img {
    display: block;
    margin: auto;
    width: 200;
}

or

img {
    display: block;
    margin: auto;
    width: 50%;
}

CSS Validator(s)

Miscellaneous

Summary

Resources

For the Beginner

More Advanced References

Recent Revisions

  1. Simon Pieters, ed., Differences from HTML4, dated 28 May 2013, retrieved 1 Feb 2014.↩