.

Sunday, April 11, 2010

Definition Lists

Posted by devlevis | Sunday, April 11, 2010 | Category: , , , |

Definition lists are slightly more complex than the other two types of lists because
they have two elements for each item, a term and a definition. However, there aren’t
many formatting options for definition lists, so their implementation tends to be
simpler than that of the other two lists.
Consider this list of definitions, highlighting popular Web browsers:
 Internet Explorer
Developed by Microsoft, an integral piece of Windows products.
Mozilla
Developed by the Mozilla Project, an open source browser for multiple platforms.
Netscape
Developed by Netscape Communications Corporation, one of the first graphical
browsers.
Safari
Developed by Apple Computer, Inc., for Apple’s OSX operating system.

The bulleted items can be coded as list terms and their definitions as list definitions,
as shown in the following code. The output of this code is shown in Figure .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example Definition List</title>
</head>
<body>
<dl>
<dt>Internet Explorer</dt>
<dd>Developed by Microsoft, an integral piece of Windows
products.</dd>
<dt>Mozilla</dt>
<dd>Developed by the Mozilla Project, an open source
browser for multiple platforms.</dd>
<dt>Netscape</dt>
<dd>Developed by Netscape Communications Corporation, one
of the first graphical browsers.</dd>
<dt>Safari</dt>
<dd>Developed by Apple Computer, Inc, for Apple's OSX
operating system.</dd>
</dl>
</body>
</html>

NOTE:To add clarity to your definition lists, you will usually want to construct styles
that set the definition term in a different font or textual style. For example, you
might want the definition terms to be red, bold, and italic. The following style
definition accomplishes this:
<style type="text/css">
dt { color: red; font-style: italic;
font-weight: bold }
</style>

Currently have 0 comments:


Leave a Reply