.

Sunday, April 11, 2010

Nested Lists

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

You can nest lists of the same or different types. For example, suppose you have a
bulleted list and need a numbered list beneath one of the items, as shown:
✦ Send us a letter detailing the problem. Be sure to include the following:
1. Your name
2. Your order number
3. Your contact information
4. A detailed description of the problem
 In such a case, you would nest an ordered list inside an unordered one, as shown in
the following code:

 <!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>
<ul style="list-style: disc;">
<li>Send us a letter detailing the problem. Be sure to
include the following:</li>
<ol style="list-style: decimal;"> <li>Your name.</li>
<li>Your order number.</li>
<li>Your contact information.</li>
<li>A detailed description of the problem.</li>
</ol>
</ul>
</body>
</html>
The output of the code is shown in Figure .
Note that the nested list does not span any open or close tags—it starts after the
close tag of the parent’s item and before any other tags in the parent list. It is also
formatted (indented) to make it easier to identify in the code. Using this method, you
can nest any list within any other list.

Definition Lists

Posted by devlevis | | Category: , , , | 0 comments

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>

Unordered (Bulleted) Lists

Posted by devlevis | | Category: , , , , | 0 comments

Unordered lists are similar to numbered lists except that they use bullets instead of
numbers or letters before each list item. Bulleted lists are generally used when
providing a list of nonsequential items.
 Unordered lists use the unordered list tag (<ul>) to delimit the entire list and the list
item tag (<li>) to delimit each individual list item.
In the preceding example, the list has three elements each preceded with a small,
round, filled bullet. This is the default for unordered lists in HTML, as shown in the
following code, whose output 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 Unordered List</title>
</head>
<body>
<ul>
<li>Vanilla</li>
<li>Chocolate</li>
<li>Strawberry</li>
</ul>
</body>
</html>
Unordered lists also support the list-style-type property, but with slightly
different values:
✦ disc
✦ circle
✦ square
✦ none
The default bullet type is disc, though the client browser can define the default
differently. The different bullet types are shown in Figure .
As with ordered lists, you can define the list-style-position property, which in
the case of unordered lists controls where the bullet appears-outside or inside the
left margin of the item. For example, to move the bullet inside the item margins you
would use a style with the <ul> tag similar to the following:

<ul style="list-style-position: inside;">

Unordered lists support one other type of bullet for each item, an image. The image
for use in unordered lists must fit the following criteria:
✦ Be accessible to the document via HTTP (be on the same Web server or
deliverable from another Web server)
✦ Be in a suitable format for the Web (jpg, gif, or png)
✦ Be sized appropriately for use as a bullet

To specify an image for the list, you use the list-style-image property. This
property has the following syntax:

list-style-image: url(url_to_image);

Ordered (Numbered) Lists

Posted by devlevis | | Category: , , , , | 0 comments

Ordered lists have elements that are preceded by numbers or letters and are meant
to provide a sequence of ordered steps for an activity. Such a list might
resemble the following:
1. In Internet Explorer, open the Web page that displays the graphic you wish to
use as wallpaper for your desktop.
2. Right-click the image to open the context menu.
3. Choose Set as Background to save the image and use it as your desktop
wallpaper.

Ordered lists use the ordered list tag (<ol>) to delimit the entire list and the list item
tag (<li>) to delimit each individual list item.
In the preceding example, the list has three elements numbered with Arabic
numbers. This is the default for ordered lists in HTML, as shown in the following
code, whose output 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 Ordered List</title>
</head>
<body>
<ol>
<li>In Internet Explorer, open the Web page that displays
the graphic you wish to use as wallpaper for your
desktop.</li>
<li>Right-click on the image to open the context menu.</li>
<li>Choose Set as Background to save the image and use it
as your desktop wallpaper.</li>
</ol>
</body>
</html>
To specify a different type of identifier for each item, you would use the list-style
attribute and define a style for the list, as shown in the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example Ordered List - Letters</title>
</head>
<body>
<ol style="list-style: upper-alpha">
<li>In Internet Explorer, open the Web page that displays
the graphic you wish to use as wallpaper for your
desktop.</li>
<li>Right-click on the image to open the context menu.</li>
<li>Choose Set as Background to save the image and use it
as your desktop wallpaper.</li>
</ol>
</body>
</html>
 This code results in the list items being prefaced with uppercase letters, as shown in Figure .








Friday, April 2, 2010

Grouping with the div Element

Posted by devlevis | Friday, April 2, 2010 | Category: , , , , , | 0 comments

Now that you know how to format paragraphs, what about groups of paragraphs?
Suppose, for example, that you wanted to indent an entire section of text and place a
border around the section. Although you can accomplish the indent by using styles
with paragraph tags, the unified border is harder to do.
For example, consider the following code, which uses styles and paragraph tags:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ParagraphBorders withParagraphTags</title>
<style type-"text/css">
p.indent-highlight { padding-left: 50px;
padding-right: 50px; border: solid 3px; }
</style>
</head>
<body>
<p class-"indent-highlight">For the first few days I could
not feed in peace; but as I found that this terrible creature
never came into the field, or did me any harm, I began to
disregard it, and very soon I cared as little about the
passing of a train as the cows and sheep did.</p>
<p class-"indent-highlight">Since then I have seen many
horses much alarmed and restive at the sight or sound of a
steam engine; but thanks to my good master's care, I am as
fearless at railway stations as in my own stable.</p>
<p class-"indent-highlight">Now if any one wants to break in
a young horse well, that is the way.</p>
</body>
</html>

The output of this code is shown in Figure . Note how each paragraph is
surrounded by its own border, which is not what you wanted.

This is where the division tag (<div>) comes in handy. The <div> tag is used to
delimit divisions of a document, which can include several paragraphs or other
block elements.
Instead of defining a style for the paragraph tag, define it as an unattached class (one
without a specified element) and use it with the <div> tag, as in the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Division Borders withDivision Tags</title>
<style type-"text/css">
.indent-highlight { padding-left: 50px;
padding-right: 50px; border: solid 3px; }
</style>
</head>
<body>
<div class-"indent-highlight">
<p>For the first few days I could not feed in peace; but as I
found that this terrible creature never came into the field,
or did me any harm, I began to disregard it, and very soon I
cared as little about the passing of a train as the cows and
sheep did.</p>
<p>Since then I have seen many horses much alarmed and
restive at the sight or sound of a steam engine; but thanks
to my good master's care, I am as fearless at railway
stations as in my own stable.</p>
<p>Now if any one wants to break in a young horse well, that
is the way.</p>
</div>
</body>
</html>

Note the output of this code in Figure .
 Note that the border in Figure  appears at the margins of the document, not
at the indent of the paragraphs it surrounds. This is because the style specifies
padding-left and padding-right, which affects the spacing between the
parent element (the border) and its children (the paragraphs). To indent the
border itself, you would need to specify values for margin-left and marginright.

Horizontal Rules

Posted by devlevis | | Category: , , , , | 0 comments

Horizontal rules are used to visually break up sections of a document.
The <hr> tag creates a line from the current position in the document to the right margin and
breaks the line accordingly.
For example, if you were reproducing text from a book, you might want to use rules
to show a break between chapters, as shown in the following excerpt from Anna
Sewell’s Black Beauty:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Excerpt of Black Beauty</title>
</head>
<body>
<p>One day he was at this game, and did not know that the
master was in the next field; but he was there, watching what
was going on; over the hedge he jumped in a snap, and
catching Dick by the arm, he gave him such a box on the ear
as made him roar with the pain and surprise. As soon as we
saw the master we trotted up nearer to see what went on.</p>
<p>"Bad boy!" he said, "bad boy! to chase the colts. This is
not the first time, nor the second, but it shall be the last.
There -- take your money and go home; I shall not want you on
my farm again."</p>
<p>So we never saw Dick any more. Old Daniel, the man who
looked after the horses, was just as gentle as our master, so
we were well off.</p><hr>
<p>Chapter 02 The Hunt</p>
<p>Before I was two years old a circumstance happened
which I have never forgotten. It was early in the spring;
there had been a little frost in the night, and a light mist
still hung over the woods and meadows. I and the other colts
were feeding at the lower part of the field when we heard,
quite ... </p>
</body>
</html>

The output of this code is shown in Figure.


As with most tags, you can customize the look of the &lt;hr&gt; tag by using styles.
For example, consider the following style:

<style type-"text/css">
hr { color: red; height: 5px; width: 50%; }
</style>

If this style were added to our last example, the results would be similar to the
output shown in Figure .

Headings

Posted by devlevis | | Category: , , , , | 0 comments

HTML has six predefined heading tags. Headings use tags containing the number
of the heading. The

tag specifies the highest (most important) level of
headings, while

specifies the lowest (least important) level of headings.As with most textual documents, HTML documents use larger fonts to specify
higher-level headings.
For example, consider the following example and its output,
shown in Figure :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<p>Normal body text.</p>
</body>
</html>

Each heading style acts like a paragraph tag, providing an automatic line break and
extra line spacing after the element. As you can see in Figure , the default spacing
after a heading is one line.
You can use heading tags to delimit a wide range of text. However, their default use is
to mark headings in a document, much like headings in a textual document. Also, like
most tags, you can use styles to customize the size and appearance of the heading tags.

For example, consider the following style code, which defines the first four
heading levels in relationship to the normal paragraph font

<style type-"text/css">
h1 { font-size: 18pt; font-family: Arial;
font-weight: bold; }
h2 { font-size: 16pt; font-family: Arial;
font-weight: bold; }
h3 { font-size: 14pt; font-family: Arial;
font-weight: bold; }
h4 { font-size: 12pt; font-family: Arial;
font-weight: bold; }
p { font-size: 12pt; font-family: Palatino;
font-weight: normal; }
</style>

Subscribe to: Comments (Atom)