Tags, They're It!

Hilary Mason

JWU

Tags

At the core of XHTML are a set of tags that describe structural information about the content of a web page.

Today we're going to learn a great number of them...

Document Structure, Rehash

Basic document structure:




  1. Document Prolog
  2. Head section
  3. Body of document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
 </head>
 <body>
 </body>
</html>

Practice Document

Use Dreamweaver to set up a basic XHTML document.

Dreamweaver will fill in the basic XHTML structure for you!

You can add each new tag to your practice file as it is introduced.

<body> - <h1>...<h6> - headings

XHTML supports six different sizes of headings. There are represented by the tags <h1> to <h6>.

This example file showcases all of them.

Magical Dissapearing Whitespace

Try each of these bits of code:

<p>For every sprinkle I find, I shall kill you!</p>

and

<p>For every sprinkle I find,    I shall kill you!</p>

Magical Dissapearing Whitespace

XHTML considers all whitespace equivalent to ' ' (one space).

Whitespace can consist of spaces, tabs, or carriage returns.

<body> - <pre>

The <pre> tag, or 'preformatted' tag, means that content has already been formatted and should be shown exactly as-is.

The <pre> tag preserves whitespace!

Try each of these bits of code:

<pre>For every sprinkle I find, I shall kill you!</pre>

and

<pre>For every sprinkle I find,    I shall kill you!</pre>

<pre>caution

In addition to preserving whitespace, the <pre> tag will not wrap lines. So a very very very very very very very very very long line will run off the page, causing the browser to use a horizontal scrollbar.

(horizontal scrollbars are bad)

<body> - <br>

<br> is the line-break tag. It instructs the browser to insert a single carriage return. The break tag differs from the <p> tag in that it never has content.

A properly written <br> tag looks like:

<br />

Lists

Lists are used to organize many types of information.

XHTML supports three kinds of lists:

<body> - <ol> - Ordered Lists

Ordered lists, also called Numbered Lists, consist of one or more numbered items.

The list begins with the ordered list start tag <ol>, and may contain any number of list items, represented by the <li> tag. Example:

<ol>
  <li>Put all ingredients in a large bowl.</li>
  <li>Mix together briskly.</li>
  <li>Bake!</li>
</ol>

<body> - <ul> - Unordered Lists

Unordered lists, or Bulleted Lists, consist of one or more unnumbered items. These items generally do not have an intrinsic order.

The list begins with the unordered list start tag <ul>, and may contain any number of list items, represented by the <li> tag. Example:

<ul>
  <li>6 apples</li>
  <li>1/2 cup sugar</li>
  <li>1 tsp cinnamon</li>
</ul>

<body> - <dl> - Definition Lists

Unlike ordered and unordered lists, definition list items have two parts - a definition term and a definition definition. A definition list begins with the <dl> tag. Each entry has both a term (<dt>) and a definition (<dd>). Example:

<dl>
  <dt>anthropomorphism</dt>
  <dd>attributing human-like emotions to inanimate objects</dd>
  <dt>bathysiderodromophobia</dt>
  <dd>the irrational fear of subways</dd>
</dl>

Practice

Try adding a list of each type (ordered, unordered, and definition) to your document.

Nested Lists

List items may contain any other XHTML items, including other lists. Web browsers will automatically adapt the list indicators depending on the level of nesting.

Nested list types may be mixed, though the nested lists must be inside an <li> element.

Check out this example, then create a nested list of your own.

Comments

Without exception, all environments that allow a programmer to author code include the ability to use comments. Comments are remarks written into code that do not show up in the page content.

In XHTML, comments look like this:

<!-- this is a comment -->

Note the asymmetrical start and end tags!

Comments

Comments have many uses:

Add a comment explaining your project to the XHTML file that you've been working on...

Web Safari

Before you leave today, find the following in live pages on the web and e-mail the URLs to the instructor.

You will need to use the View...Source command, and I recommend the Find command.