Free Tutorials http://www.mzwriter.org Download Free Tutorials Tue, 01 Jul 2008 16:18:43 +0000 http://wordpress.org/?v=2.5.1 en Creating Simple menu list in HTML http://www.mzwriter.org/tutorials/html/creating-simple-menu-list-in-html.tutes http://www.mzwriter.org/tutorials/html/creating-simple-menu-list-in-html.tutes#comments Tue, 01 Jul 2008 16:18:43 +0000 Mantasha http://www.mzwriter.org/tutorials/?p=52

The <menu> tag displays a list of short choices to the reader, such as a menu of links to other documents. The browser may use a special (typically more compact) representation of items in a menu list compared with the general unordered list, or even use some sort of graphical pull-down menu to implement the menu list. If the list items are short enough, the browser may even display them in a multicolumn format, and may not append a leading bullet with each list item.

<menu>

Function:

Define a menu list

Attributes:

CLASS (Netscape) (Internet Explorer)
COMPACT
STYLE (Netscape) (Internet Explorer)
TYPE

End tag:

</menu>, never omitted

Contains:

list_content

Used in:

block

Like an unordered list, define the menu list items with the <li> tag. When used within a menu list, however, the <li> tag may not contain any block element, including paragraphs, other lists, preformatted text, or forms.

Compare the source text below and the Mosaic display (Figure 8.9) with the directory (Figure 8.8) and unordered (Figure 8.1) list displays we presented earlier in this chapter.

<p>
Some popular kumquat recipes include:
<menu>
  <li>Pickled Kumquats
  <li>'Quats and 'Kraut (a holiday favorite!)
  <li>'Quatshakes
</menu>
There are many more to please every palate!

Figure 8.9: Sample <menu> list

[Graphic: Figure 8-9]

The <menu> tag also has the compact attribute to produce an even more reduced list presentation, although in practice, few browsers are willing or able to implement the compacted menu list display. Netscape, in fact, doesn’t distinguish between a menu and an unordered list.

Releted Tutorials

]]> http://www.mzwriter.org/tutorials/html/creating-simple-menu-list-in-html.tutes/feed bullet listing in HTML pages http://www.mzwriter.org/tutorials/html/bullet-listing-in-html-pages.tutes http://www.mzwriter.org/tutorials/html/bullet-listing-in-html-pages.tutes#comments Tue, 01 Jul 2008 15:44:05 +0000 Mantasha http://www.mzwriter.org/tutorials/?p=51 The <dir> Tag

The designers of HTML originally dedicated the <dir> tag for displaying lists of files. As such, the browser, if it treats <dir> and <ul> differently at all (most don’t), expects the various list elements to be quite short, possibly no longer than 20 characters or so. Some browsers display the elements in a multicolumn format and may not use a leading bullet.

<dir>

Function:

Define a directory list

Attributes:

CLASS (Netscape) (Internet Explorer)
COMPACT
STYLE (Netscape) (Internet Explorer)

End tag:

</dir>, never omitted

Contains:

list_content

Used in:

block

As with the unordered list, define directory list items with the <li> tag. When used within a directory list, however, the <li> tag may not contain any block element, including paragraphs, other lists, preformatted text, or forms.

The following example puts the directory tag to its traditional task of presenting a list of filenames:

The distribution tape has the following files on it:
<dir>
  <li><code>README</code>
  <li><code>Makefile</code>
  <li><code>main.c</code>
  <li><code>config.h</code>
  <li><code>util.c</code>
</dir>

Notice that we use the <code> tag to ensure that the filenames would be rendered in an appropriate manner (see Figure 8.8).

Figure 8.8: An example <dir> list

[Graphic: Figure 8-8]

Like the other formatting tags we’ve seen so far, the <dir> tag has an optional compact attribute for producing an even more reduced list display, even though virtually none of the browsers is either willing or capable of compacting directory lists.

You can change the style used to bullet the <dir> list items with the type attribute extension and the values circle, square, or disc. This behavior is identical to the type attribute in an unordered list.

Releted Tutorials

]]> http://www.mzwriter.org/tutorials/html/bullet-listing-in-html-pages.tutes/feed Nested Lists in HTML http://www.mzwriter.org/tutorials/html/nested-lists-in-html.tutes http://www.mzwriter.org/tutorials/html/nested-lists-in-html.tutes#comments Tue, 01 Jul 2008 15:42:37 +0000 Mantasha http://www.mzwriter.org/tutorials/?p=50 Except inside directories or menus, lists nested inside other lists are fine. Menu and directory lists can be embedded within other lists.

Indents for each nested list are cumulative, so take care not to nest lists too much; the list contents could quickly turn into a thin ribbon of text flush against the right edge of the browser document window.

Nested Unordered Lists

The items in each nested unordered list may be preceded by a different bullet character at the discretion of the browser. For example, Internet Explorer Version 2 for the Macintosh uses an alternating series of hollow, solid circular, and square bullets for the various nests in the following source HTML text as shown in Figure 8.6:

<ul>
  <li>Morning Kumquat Delicacies
  <ul>
    <li>Hot Dishes
    <ul>
      <li>Kumquat omelet
      <li>Kumquat waffles
      <ul>
        <li>Country style
        <li>Belgian
      </ul>
      <li>Kumquats and toast
    </ul>
    <li>Cold Dishes
    <ul>
      <li>Kumquats and cornflakes
      <li>Pickled Kumquats
      <li>Diced Kumquats
    </ul>
  </ul>
</ul>

Figure 8.6: Bullets change for nested unordered list items

[Graphic: Figure 8-6]

You can change the bullet style for each unordered list and even individual list items (see the type attribute discussion earlier in this chapter), but the repertoire of bullets is limited. For example, Internet Explorer for Windows 95 uses a solid disc regardless of the nesting level.

Nested Ordered Lists

By default, browsers number the items in ordered lists beginning with the Arabic numeral 1, nested or not. It would be great if the HTML standard numbered nested ordered lists in some rational, consecutive manner. For example, the items in the second nest of the third main ordered list might be successively numbered “3.2.1,” “3.2.2,” “3.2.3,” and so on.

With the type and value attributes, however, you do have a lot more latitude in how you create nested ordered lists. An excellent example is the traditional style for outlining, which uses the many different ways of numbering items offered by the type attribute (see Figure 8.7):

<ol type=A>
  <li>A History of Kumquats
  <ol type=1>
    <li>Early History
    <ol type=a>
      <li>The Fossil Record
      <li>Kumquats: The Missing Link?
    </ol>
    <li>Mayan Use of Kumquats
    <li>Kumquats in the New World
  </ol>
  <li>Future Use of Kumquats
</ol>

Figure 8.7: The type attribute lets you do traditional outlining with ordered lists

[Graphic: Figure 8-7]

Releted Tutorials

]]> http://www.mzwriter.org/tutorials/html/nested-lists-in-html.tutes/feed Changing the Style and Sequence of Individual List Items http://www.mzwriter.org/tutorials/html/changing-the-style-and-sequence-of-individual-list-items.tutes http://www.mzwriter.org/tutorials/html/changing-the-style-and-sequence-of-individual-list-items.tutes#comments Tue, 01 Jul 2008 15:41:35 +0000 Mantasha http://www.mzwriter.org/tutorials/?p=49 Just as you can change the bullet or numbering style for all of the items in an unordered or ordered list, you also can change the style for individual items within those lists. With ordered lists, you also can change the value of the item number. As you’ll see, the combinations of changing style and numbering can lead to a variety of useful list structures, particularly when included with nested lists.

The type attribute

Acceptable values for the type attribute in the <li> tag are the same as the values for the appropriate list type: items within unordered lists may have their type set to circle, square, or disc, while items in an ordered list may have their type set to any of the values shown previously in Table 8.1. The change affects the current item and any subsequent items in the list.

There is no way to revert back to the list’s default type once you have changed the type for a single item; you’ll need to explicitly reset the type on the next item. Thus, to make a single item in a list different from the rest, you’ll need to change two items: the actual item you want changed, and the next item, which must be changed back to the general list format.

Figure 8.4 shows the effect that changing the type for an individual item in an ordered list has on subsequent items, as rendered by Netscape from the following source:

<ol>
  <li type=A>Changing the numbering style
  <li type=a>Doesn't alter the order!
  <li> &lt;-- See? It's a "c"!
  <li type=I>Uppercase Roman numerals!
  <li type=i>Lowercase Roman numerals!
  <li type=1>Plain ol' numbers!
</ol>

Figure 8.4: Changing the numbering style for each item in an ordered list

[Graphic: Figure 8-4]

Notice how the type attribute changes the display style of the number, but not the value of the number itself.

The value attribute

The value attribute lets you change the number of a specific list item and the ones that follow it. Since the ordered list is the only HTML list with sequentially numbered items, the value attribute is only valid when used within an <li> tag inside an ordered list.

To change the current and subsequent numbers attached to each item in an ordered list, simply set the value attribute to any integer. For example, the following source uses the value attribute to jump the numbering on items in an ordered list:

<ol>
  <li>Item number 1
  <li>And the second
  <li value=9> Jump to number 9
  <li>And continue with 10...
</ol>

The results are shown as rendered by Netscape in Figure 8.5.

Figure 8.5: The value attribute lets you change individual item numbers in an ordered list

[Graphic: Figure 8-5]

Releted Tutorials

]]> http://www.mzwriter.org/tutorials/html/changing-the-style-and-sequence-of-individual-list-items.tutes/feed li tag and its use in HTML http://www.mzwriter.org/tutorials/html/li-tag-and-its-use-in-html.tutes http://www.mzwriter.org/tutorials/html/li-tag-and-its-use-in-html.tutes#comments Tue, 01 Jul 2008 15:40:18 +0000 Mantasha http://www.mzwriter.org/tutorials/?p=48 It should be quite obvious to you by now that the <li> tag defines an item in a list. It’s the universal tag for HTML list items in ordered (<ol>) and unordered (<ul>) lists, as we discuss above, and for directories (<dir>) and menus (<menu>), which we discuss in detail later in this chapter.

<li>

Function:

Define an item within an ordered, unordered, directory, or menu list

Attributes:

CLASS (Netscape) (Internet Explorer)
STYLE (Netscape) (Internet Explorer)
TYPE
VALUE

End tag:

</li>, usually omitted

Contains:

flow

Used in:

list_content

Because the end of a list element can always be inferred by the surrounding document structure, most authors omit the ending </li> tags for their list elements. That makes sense because it becomes easier to add, delete, and move elements around within a list. We recommend not using the </li> end tag.

Although universal in meaning, there are some differences and restrictions to the use of the <li> tag for each HTML list type. In unordered and ordered lists, what follows the <li> tag may be nearly anything, including other lists and multiple paragraphs. Typically, if it handles indentation at all, the browser successively indents nested list items, and the content in those items is justified to the innermost indented margin.

Directory and menu lists are another matter. They are lists of short items like a single word or simple text blurb and nothing else. Consequently, <li> items within <dir> and <menu> tags may not contain other lists or other block elements, including paragraphs, preformatted blocks, or forms.

Clean documents, fully compliant with the HTML standard, should not contain any text or other document item inside the unordered, ordered, directory, or menu lists that is not contained within an <li> tag. Most browsers are tolerant of violations to this rule, but then you can’t hold the browser responsible for compliant rendering for exceptional cases, either.

Releted Tutorials

]]> http://www.mzwriter.org/tutorials/html/li-tag-and-its-use-in-html.tutes/feed Different Atributes of Ordered list http://www.mzwriter.org/tutorials/html/different-atributes-of-ordered-list.tutes http://www.mzwriter.org/tutorials/html/different-atributes-of-ordered-list.tutes#comments Tue, 01 Jul 2008 15:38:22 +0000 Mantasha http://www.mzwriter.org/tutorials/?p=47

The start attribute

Normally, browsers automatically number ordered list items beginning with the Arabic numeral 1. The start attribute for the <ol> tag lets you change that beginning value. To start numbering a list at 5, for example:

<ol start=5>
  <li> This is item number 5.
  <li> This is number six!
  <li> And so forth...
</ol>

The type attribute

By default, browsers number ordered list items with a sequence of Arabic numerals. Besides being able to start the sequence at some number other than 1, you can use the type attribute with the <ol> tag to change the numbering style itself. With the <ol> tag, the type attribute may have a value of “A” for numbering with capital letters, “a” for numbering with lowercase letters, “I” for capital Roman numerals, “i” for lowercase Roman numerals, or “1″ for common Arabic numerals. (See Table 8.1).

Table 8.1: HTML 3.2 type values for numbering ordered lists
Type Value Generated Style Sample Sequence
A Capital letters A, B, C, D
a Lowercase letters a, b, c, d
I Capital Roman numerals I, II, III, IV
i Lowercase Roman numerals i, ii, iii, iv
1 Arabic numerals 1, 2, 3, 4

The start and type attribute extensions work in tandem. The start attribute sets the starting value of the item integer counter at the beginning of an ordered list. The type attribute sets the actual numbering style. For example, the following ordered list starts numbering items at 8, but because the style of numbering is set to i, the first number is the lowercase Roman numeral, “viii.” Subsequent items are numbered with the same style, each value incremented by 1 as shown in this example:

<ol start=8 type="i">
  <li> This is the Roman number 8.
  <li> The numerals increment by 1.
  <li> And so forth...
</ol>

The results are shown in Figure 8.3.

Figure 8.3: The start and type attributes work in tandem

[Graphic: Figure 8-3]

Releted Tutorials

]]> http://www.mzwriter.org/tutorials/html/different-atributes-of-ordered-list.tutes/feed Ordered Lists in HTML pages http://www.mzwriter.org/tutorials/html/ordered-lists-in-html-pages.tutes http://www.mzwriter.org/tutorials/html/ordered-lists-in-html-pages.tutes#comments Tue, 01 Jul 2008 15:36:51 +0000 Mantasha http://www.mzwriter.org/tutorials/?p=46 Use an ordered list when the sequence of the list items is important. A list of instructions is a good example, as are tables of content and lists of document footnotes or endnotes.

The <ol> Tag

The typical browser formats the contents of an ordered list just like an unordered list, except that the items are numbered instead of bulleted. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.

<ol>

Function:

Define an ordered list

Attributes:

CLASS (Netscape) (Internet Explorer)
COMPACT
START
STYLE (Netscape) (Internet Explorer)
TYPE

End tag:

</ol>, never omitted

Contains:

list_content

Used in:

block

HTML 3.2 has a number of features that provide a wide variety of ordered lists. You can change the start value of the list and select any of five different numbering styles. Here is a sample ordered list:

<h3>Pickled Kumquats</h3>
Here's an easy way to make a delicious batch of pickled 'quats:
<ol>
  <li>Rinse 50 pounds of fresh kumquats
  <li>Bring eight gallons white vinegar to rolling boil
  <li>Add kumquats gradually, keeping vinegar boiling
  <li>Boil for one hour, or until kumquats are tender
  <li>Place in sealed jars and enjoy!
</ol>

This is rendered by Netscape as shown in Figure 8.2.

Figure 8.2: An ordered list

[Graphic: Figure 8-2]

Releted Tutorials

]]> http://www.mzwriter.org/tutorials/html/ordered-lists-in-html-pages.tutes/feed List Formatting in HTML pages http://www.mzwriter.org/tutorials/html/list-formatting-in-html-pages.tutes http://www.mzwriter.org/tutorials/html/list-formatting-in-html-pages.tutes#comments Tue, 01 Jul 2008 15:35:07 +0000 Mantasha http://www.mzwriter.org/tutorials/?p=45 The <ul> tag signals the browser that the following content, ending with the </ul> tag, is an unordered list of items. Inside, each item in the unordered list is identified by a leading <li> tag. Otherwise, nearly anything HTML-wise goes, including other lists, text, and multimedia elements.

<ul>

Function:

Define an unordered list

Attributes:

CLASS (Netscape) (Internet Explorer)
COMPACT
STYLE (Netscape) (Internet Explorer)
TYPE

End tag:

</ul>, never omitted

Contains:

list_content

Used in:

block

Typically, the browser adds a leading bullet character and formats each item on a new line, indented somewhat from the left margin of the document. The actual rendering of unordered lists, however, varies widely between browsers, so you shouldn’t get bent out of shape trying to attain exact positioning of the elements. For instance, some browsers treat the start of an unordered list as a new paragraph and, like the <p> tag, leave a blank line above the list. Other browsers simply start the list item after a simple line break. Browsers vary, too, in how much space they use between list items. For example, the following source:

Popular Kumquat recipes:
<ul>
  <li>Pickled Kumquats
  <li>‘Quats and ‘Kraut (a holiday favorite!)
  <li>‘Quatshakes
</ul>
There are so many more to please every palate!

appears to the Mosaic user as shown in Figure 8.1.

Figure 8.1: A simple unordered list

[Graphic: Figure 8-1]

Tricky HTML authors sometimes use nested unordered lists, with and without <li>-tagged items, to take advantage of the automatic, successive indenting. You can produce some fairly slick text segments that way. Just don’t depend on it for all browsers, including future ones. Rather, it’s best to use the border property with a style definition in the paragraph (<p>) or division (<div>) tag to indent nonlist sections of your document

Releted Tutorials

]]> http://www.mzwriter.org/tutorials/html/list-formatting-in-html-pages.tutes/feed How browsers might use link tag http://www.mzwriter.org/tutorials/html/how-browsers-might-use-link-tag.tutes http://www.mzwriter.org/tutorials/html/how-browsers-might-use-link-tag.tutes#comments Mon, 30 Jun 2008 18:24:49 +0000 Mantasha http://www.mzwriter.org/tutorials/?p=44

How browsers might use <link>

Although the HTML standard does not require browsers to do anything with the information provided by the <link> tag, it’s not hard to envision how this information might be used to enhance the presentation of a document.

As a simple example, suppose you consistently provide <link> tags for each of your documents that define next, prev, and parent links. A browser could use this information to place a standard toolbar at the top or bottom of each document containing buttons that would jump to the appropriate related document. By relegating the task of providing simple navigational links to the browser, you are free to concentrate on the more important content of your document.

As a more complex example, suppose a browser expects to find a <link> tag defining a glossary for the current document, and that this glossary document is itself a searchable document. Whenever a reader clicked on a word or phrase in the document, the browser could automatically search the glossary for the definition of the selected phrase, presenting the result in a small pop-up window.

As the Web and HTML evolve, expect to see more and more uses of the <link> tag to explicitly define document relationships on the Web.

Releted Tutorials

]]> http://www.mzwriter.org/tutorials/html/how-browsers-might-use-link-tag.tutes/feed How to connect Two HTML pages (Establishing Document Relationships) http://www.mzwriter.org/tutorials/html/how-to-connect-two-html-pages-establishing-document-relationships.tutes http://www.mzwriter.org/tutorials/html/how-to-connect-two-html-pages-establishing-document-relationships.tutes#comments Mon, 30 Jun 2008 18:24:03 +0000 Mantasha http://www.mzwriter.org/tutorials/?p=43

Normally, the browser fills in the blanks of a relative URL by drawing the missing pieces from the URL of the current document. You can change that with the <base> tag.

<base>

Function:

Define the base URL for other anchors in the document

Attributes:

HREF
TARGET (Netscape) (Internet Explorer)

End tag:

None

Contains:

Nothing

Used in:

head_content

The <base> tag must appear only in the document header, not its body contents. The browser thereafter uses the specified base URL, not the current document’s URL, to resolve all relative URLs, including those found in <a>, <img>, <link>, and <form> tags. It also defines the URL that will be used to resolve queries in searchable documents containing the <isindex> tag.

The href attribute

The href attribute must have a valid URL as its value, which the browser then uses to define the absolute URL against which relative URLs are based within the document. For example, the <base> tag in this document head,

<html>
<head>
<base href="http://www.kumquat.com/">
</head>
...

tells the browser that any relative URLs within this document are relative to the top-level document directory on www.kumquat.com, regardless of the address and directory of the machine from which the user had retrieved the current document.

Contrary to what you may expect, you can make the base URL relative, not absolute. The browser actually forms an absolute base URL out of this relative URL by filling in the missing pieces with the URL of the document itself. This property can be used to good advantage. For instance, in this next example,

<html>
<head>
<base href="/info/">
</head>
...

the browser will make the <base> URL into one that is relative to the server’s /info/ directory, which probably is not the same directory of the current document. Imagine if you had to re-address every link in your document with that common directory. Not only does the <base> tag help you shorten those URLs in your document that have a common root, it also lets you constrain the directory from which relative references are retrieved without binding the document to a specific server.

The target attribute

When working with documents inside frames, the target attribute with the <a> tag ensures that a referenced URL gets loaded into the correct frame. Similarly, the target attribute for the <base> tag lets you establish the default name of one of the frames or windows in which the browser is to display redirected hyperlinked documents.

If you have no other default target for your hyperlinks within your frames, you may want to consider using <base target=_top>. This will ensure that links that are not specifically targeted to a frame or window will thereby load in the top-level browser window. This eliminates the embarrassing and common error of having references to pages on other sites appear within a frame on your pages, instead of within their own pages. A minor bit of HTML, to be sure, but it makes life much easier for your readership.

Using <base>

The most important reason for using <base> is to ensure that any relative URLs within the document will resolve into a correct document address, even if the document itself is moved or renamed. This is particularly important when creating a document collection. By placing the correct <base> tag in each document, you can move the entire collection between directories and even servers without breaking all of the links within the documents.

You also need to use the <base> tag for a searchable document (<isindex>) if you want user queries posed to a URL different from the host document.

Note that a document that contains both the <isindex> tag and other relative URLs may have problems if the relative URLs are not relative to the desired index processing URL. Since this is usually the case, do not use relative URLs in searchable documents that use the <base> tag to specify the query URL for the document.

The <link> Header Element

Use the <link> tag to define the relationship between the current document and another in a Web collection.

<link>

Function:

Define a relationship between this document and another document

Attributes:

HREF
REL
REV
TITLE
TYPE (Netscape) (Internet Explorer)

End tag:

None

Contains:

Nothing

Used in:

head_content

The <link> tags belongs in the <head> content, nowhere else. The attributes of the <link> tag are used like those of the <a> tag, but their effects serve only to document the relationship between documents. The <link> tag has no content and no closing </link> element.

The href attribute

As with its other tag applications, the href attribute specifies the URL of the target <link> tag. It is a required attribute, too, and its value is any valid document URL. The specified document is assumed to have a relationship to the current document.

The rel and rev attributes

The rel and rev attributes express the relationship between the source and target documents. The rel attribute specifies the relationship from the source document to the target; the rev attribute specifies the relationship from the target document to the source document. Both attributes can be included in a single <link> tag.

The value of either attribute is a space-separated list of relationships. The actual relationship names are not specified by the HTML standard, although some have come into common usage as listed in 7.3.1.5. For example, a document that is part of a sequence of documents might use:

<link href="part-14.html" rel=next rev=prev>

when referencing the next document in the series. The relationship from the source to the target is that of moving to the next document; the reverse relationship is that of moving to the previous document.

The title attribute

The title attribute lets you specify the title of the document to which you are linking. This attribute is useful when referencing a resource that does not have a title, such as an image or a non-HTML document. In this case, the browser might use the <link> title when displaying the referenced document. For example,

<link href="pics/kumquat.gif"
  title="A photograph of the Noble Fruit">

tells the browser to use the indicated title when displaying the referenced image.

The value of the attribute is an arbitrary character string, enclosed in quotation marks.

The type attribute

The type attribute provides the MIME content type of the linked document. Supported by both Internet Explorer and Netscape, the type attribute can be used with any linked document. It is often used to define the type of linked style sheets. In this context, the value of the type attribute is usually text/css. For example,

<link href="styles/classic.css" rel=stylesheet type="text/css">

Releted Tutorials

]]> http://www.mzwriter.org/tutorials/html/how-to-connect-two-html-pages-establishing-document-relationships.tutes/feed