HTML and Markup

Notes to Instructors

I think we should use HTML5 rather than XHTML, but stick to the XML syntax (which is an option but not a requirement in HTML5). It is widely supported by modern browsers, although not yet officially a recommendation of the W3C, and the DOCTYPE declaration is much simpler!

I’ve put up some very terse notes HTML and Markup (also accessible from my DRAFT I101 site). Among other things, they point out the essential things we need to know about HTML5 and the XML syntax. I’ve provided links to two validators; validation is important, since web browsers are very non-strict about parsing any kind of HTML (except XHTML).

The way I will teach this in the classroom is to begin with an empty document, fill it with the basic HTML5 structure, view the nearly empty document in a web browser; and then begin iteratively adding elements to the page, checking each addition in the browser, and (at least once, at the end) uploading to both of the validators to check it. I would try to put in both tags of a tag pair (e.g., <p> </p>) and then fill in the content.

Learning Objectives

(See p. 79) Be able to:

HTML5

We should use HTML5, not XHTML, but use the XML syntax:

Omit the tags <b> and <i>; use <strong> and <em> instead.

Required Tags for HTML5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Insert Title</title>
  </head>
  <body>
    Insert Body
  </body>
</html>

An element consists of a pair of tags (such as <body> and </body>) and everything between them.

Tools

Recommended editors:

Recommended browser:

Procedure:

  1. Edit your HTML page and save the file.
  2. From the browser, open the URL (e.g., file:///C:/Users/userid/Documents/first.html) or double-click on the file to open it (in what?)

Simple Body Elements

Structure your code with line breaks and indenting.

Whitespace is compressed to a single space, unless it is in a preformatted (pre) element.

Special characters:

Validation

It is important to be sure you are writing valid HTML.

Structured HTML Elements

Structured elements include lists, “anchor” (a) or link elements, images, and tables.

Lists

Links put the “hyper” in hypertext. Example:

<a href="http://www.iue.edu/registrar/index.php">IU East Registrar</a>

URLs

Parts of the URL:

Absolute URLs contain all of these parts. They completely and unambiguously specify the URL.

Relative URLs omit some of the (leading) parts. Your web browser fills in the missing parts from the context. If the scheme is omitted, it is the same scheme you are coming from. If the host name is omitted, it is the same host name you are coming from. If parts of the file path (leading directories) are omitted, we start from where you are in the file system; .. means go up a level in the directory hierarchy.

Examples of relative URLs:

Images

For displaying pictures in your web page. Example:

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

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

Tables

Summary

Style

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

CSS Validator(s)

Miscellaneous

Resources

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