A definition list is just what it sounds like: a list that presents terms with their definitions, such as you would see in a glossary . The word being defined serves as a heading, and the definition paragraph is indented under it .
The complete list (headings and definition paragraphs) is contained within the <dl> and
</dl> tags, which stands for definition list . Each word to be defined is contained in a
<dt> (definition term) tag, and the definition paragraphs are in <dd> (definition descrip-tion) tags . Here’s the code for the example just shown:
<dl>
<dt>Fungus</dt>
<dd>A primitive, non-vascular, non-photosynthetic form of plant life. Examples include mildews, molds, and mushrooms.</dd>
<dt>Nematode</dt>
<dd>A microscopic roundworm that lives in the soil. There are both harmful and beneficial nematodes. Harmful ones take their toll on the roots of the plant.
</dd>
</dl>
This example shows a one-to-one relationship between words and definitions (one definition for each word), but that’s not a requirement . You can have multiple consecu-tive entries of either type . You might do this to accommodate situations in which a single word has two meanings or two words have the same definition .
Note HTML permits you to omit the closing </dt> and </dd> tags, but you should get into the habit of using them anyway. XHTML requires them.
In this exercise, you will create a glossary of terms on a Web page .
SET UP Use the glossary.htm file in the practice file folder for this topic. This practice file is located in the Documents\Microsoft Press\HTML5 SBS\04Lists\CreatingGlossary folder. Open the glossary file in Notepad and in Internet Explorer.
1.
In the <body> area, enter the following:<h1>Gardening Terms</h1>
<p>Here are some useful gardening terms:</p>
Inserting Special Characters 55
2.
After the text you just entered, create the following definition list:<dl>
<dt>Acid Soil</dt>
<dd>Soil that is lower than 7.0 pH. Acidity is measured by the amount of calcium in the soil. The opposite of acidic soil is alkaline soil.</dd>
<dt>Deciduous</dt>
<dd>A tree or plant that loses its leaves at the end of the growing season, such as a maple tree.</dd>
<dt>Fungus</dt>
<dd>A primitive, non-vascular, non-photosynthetic form of plant life.
Examples include mildews, molds, and mushrooms.</dd>
<dt>Nematode</dt>
<dd>A microscopic roundworm that lives in the soil. There are both harmful and beneficial nematodes. Harmful ones take their toll on the roots of the plant.</dd>
</dl>
3.
Save the file, and then refresh the Internet Explorer display to view your work .CLEAN UP Close the Notepad and Internet Explorer windows.
Inserting Special Characters
Special characters are characters that are not included on a standard English keyboard . Examples include letters with accent marks over them such as in résumé, or an ownership symbol like © or ™ . In HTML, these special characters are referred to as entities, and you create them by using codes beginning with an ampersand (&), followed by an entity
name or an entity number, and ending with a semicolon . The entity names and entity numbers both represent the same thing; you can use either one . For example or
  both render as a non-breaking space .
In addition to the non-keyboard symbols, certain other symbols must be created as enti-ties in HTML because they have a specific meaning in HTML . The most common are the ampersand (&), the greater than sign (>), and the less than sign (<) . You can’t just type those symbols in HTML code because a browser would interpret them as tags or entities rather than characters to display .
The following table lists the most common entities . For a more complete list, refer to the file entities.htm included with the data files for this book .
Symbol Entity Name Entity Number
Note The nonbreaking space entity is very popular for creating spaces, and in fact, many WYSIWYG Web site creation programs like Microsoft Expression Web and Adobe Dreamweaver insert them for you when you press the spacebar. Don’t use nonbreaking spaces instead of good layout techniques, though. For example, if something needs to be indented a certain amount, use the correct HTML tags and styles to create the indent, don’t just “space over” with a half-dozen codes.
In this exercise, you will add copyright and trademark symbols to a Web page . SET UP Use the index.htm file in the practice file folder for this topic. This practice file is located in the Documents\Microsoft Press\HTML5 SBS\04Lists\
InsertingCharacters folder. Open the index file in Notepad and in Internet Explorer.
Inserting Horizontal Lines 57
1.
Add copyright and trademark symbols to the copyright notice at the bottom of the file .<p>Copyright © 2012 The Garden Company™<br>
No material may be reproduced without written permission</p>
2.
Save the file, and then refresh the Internet Explorer display to check your work .CLEAN UP Close the Notepad and Internet Explorer windows.
Inserting Horizontal Lines
Horizontal lines can be useful as dividers between sections of text in a Web page . For example, in the preceding exercise, you created a copyright notice that blends in perhaps a little too well with the rest of the text on the page; it would stand out more if it were separated from the rest of the document by a horizontal line . You might also want to add another horizontal line between the first two headings and the rest of the document .
To add a horizontal line, simply add the following one-sided tag where you want the line to appear:
<hr>
Note In XHTML, you must add a space and closing slash, like this: <hr />. HTML5 also
recognizes that syntax as an optional alternative. The slash is required for XHTML compatibility, while the space preceding the slash enables older browsers to read the tag correctly.
By default, the line runs the entire width of the browser window, is two pixels in height, and is black with a chiseled effect . You can change these characteristics by applying attributes within the tag .
Most of the original attributes for the <hr> tag were deprecated in HTML Version 4 .01;
attributes such as align, color, size, and width are not supported at all in HTML5 . You now set the rendering characteristics for a horizontal line using styles, as you will learn in Chapter 6, “Introduction to Style Sheets .” It’s best to specify a uniform appearance for all lines with a cascading style sheet, as you’ll learn to do in Chapter 6, but you can also add styling directly to the <hr> tag by simply including the style=”attributes” attribute . The attri-butes you can set are color, background-color, width, and height. For example, to create a green line that is 3 pixels thick and spans 50% of the window’s width, you would write:
<hr style="color: green; background-color: green; height: 3; width: 50%">
Some browsers use color to assign a color to the line, others use background-color; there-fore, you should include both tags and assign the same color for both .
Inserting Horizontal Lines 59
HTML recognizes these 16 basic color names:
● Note To see full-color samples of these, refer to Documents\Microsoft Press\HTML5 SBS\
Reference\colors.htm.
In this exercise, you will add two horizontal rules to a Web page .
SET UP Use the index.htm file from the previous exercise, or use the one in the practice file folder for this topic. The practice file is located in the Documents\
Microsoft Press\HTML5 SBS\04Lists\InsertingLines folder. Open the index file in Notepad and in Internet Explorer.
1.
Immediately above the copyright notice, add this tag:<hr style="color: green; background-color: green; height: 3">
2.
Copy and paste that same tag immediately below the <h5> heading near the top .3.
Save the file, and then refresh the Internet Explorer display to check your work .CLEAN UP Close the Notepad and Internet Explorer windows.