CSC 102

Laboratory: More HTML

 

This lab continues where the previous HTML lab left off. It looks at additional features and formatting options.

Special Characters

Certain characters cannot be used directly in web pages because they would confuse the browser. For example, < and > look like parts of tags. Other symbols aren't part of the standard ascii character set, like accented characters (é, ü, ñ, etc.). To include symbols like these in your web pages, you need to type something called an escape sequence. For example, the escape sequence for < is &lt;, and for > is &gt;. If you type one of these sequences of characters, the browser will replace it with the corresponding symbol without trying to interpret it as the begiining of a tag. A full list of escape sequences may be found at this web site, among others.

To practice using escape codes, see if you can recreate the picture below (in black on white). You will want to put everything inside a <pre> tag, which reproduces the whitespace inside it exactly. (Otherwise, the rbwoser will treat any number of spaces as just a single space for display purposes.) Some of the characters you can type directly, but others will require escape codes. This may be an application where Dreamweaver's design view proves useful.

ASCII art picture of bird

When you are finished you can check your answer here.

Lists

HTML defines three types of lists: unordered, ordered, and definition. (Why three kinds? Each has a different intended purpose and appropriate use.) Below are simple examples of each.

  1. Ordered lists show numbers by default.
  2. The number increase in value item by item.
Definition Topic
The definition topic appears at the top of each item and indicates what is being defined.
Definition Data
The definition data appears below the topic and contains the definition itself.

Below is the HTML source that created the lists above. Notice that list items are indented for greater visibility. If the list items are long (more than two lines) it might be preferable to separate them by blank lines instead.

<ul>
  <li>Unordered lists appear as bullet points by default.</li>
  <li>List items in both ordered and unordered lists are indicated by the <b>&lt;li&gt;</b> 
tag.</li>
</ul>

<ol>
  <li>Ordered lists show numbers by default.</li>
  <li>The number increase in value item by item.</li>
</ol>

<dl>
  <dt>Definition Topic</dt>
  <dd>The definition topic appears at the top of each item and indicates what
  is being defined.</dd>
  <dt>Definition Data</dt>
  <dd>The definition data appears below the topic and contains the definition
  itself.</dd>
</dl>

See if you can make a page that looks like the one below. When you are done, see if the HTML source you created looks like the example.

Example of HTML list elements

If you are feeling ambitious, experiment with changing the list marker on the ordered and/or unordered lists, by adding a style="list-style-type: square" (or some other possible value besides square). You may be wondering if you can use this to make an unordered list appear ordered. Can you? (Not that this is a good idea as general practice...)