Skip to content Skip to navigation

Connexions

You are here: Home » Content » Web Programming Quick Start: XHTML -- Headings and Lists

Navigation

Content Actions
  • Download module PDF
  • Add to ...
    Add the module to:
    • My Favorites
    • A lens
    • An external social bookmarking service
    • My Favorites (What is 'My Favorites'?)
      'My Favorites' is a special kind of lens which you can use to bookmark modules and collections directly in Connexions. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need a Connexions account to use 'My Favorites'.
    • A lens (What is a lens?)

      Definition of a lens

      Lenses

      A lens is a custom view of Connexions content. You can think of it as a fancy kind of list that will let you see Connexions through the eyes of organizations and people you trust.

      What is in a lens?

      Lens makers point to Connexions materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

      Who can create a lens?

      Any individual Connexions member, a community, or a respected organization.

    • External bookmarks
  • E-mail the author

Recently Viewed

Web Programming Quick Start: XHTML -- Headings and Lists

Module by: Ronald Sawey

Summary: This module discusses how to add headings and lists (bulleted and numbered) to an XHTML document. The tags discussed are <h1> through <h6>, <ul> and <ol> in conjunction with <li>.

Introduction

The primary goal of this "Web Programming Quick Start" series is to get the reader to the point of doing something productive with a minimum of time and effort. It is not intended to be an exhaustive treatment/reference of any of the subjects discussed. This is also very much a work in progress. All comments, criticisms, suggestions, etc. are most welcome.

In the series of modules on XHTML (eXtensible HyperText Markup Language) and CSS (Cascading Style Sheets), we will be following the "current wisdom" on web page construction and design as exemplified by the three excellent web-related books of Rachael Andrew. Specifically, we will endeavor to keep the content and the styling/formatting of the web documents separate.

This module builds on material discussed in the XHTML module dealing with the creation of an initial XHTML file. A complete listing

A screen recording, demonstrating the material in this module is also available (time permitting).

The <h1> through <h6>Tags

For those times your web page is broken into "sections, subsections, etc.," they can be labelled with 6 levels of "headings." headdemo1.html exemplifies all six heading tags. Figure 1 shows the relevant segment of XHTML code, and Figure 2 shows the result of the Firefox browser presenting this XHTML.

Figure 1: XHTML code for the 6 levels of the heading tag
Figure 1 (heading1.gif)
Figure 2: Firefox Browser Presentation of headdemo1.html
Figure 2 (browser1.gif)

Our second example shows the use of <h1> and <h2> tags in conjunction with two paragraphs. The XHTML file is headdemo2.html. Figure 3 shows the relevant segment of XHTML code, and Figure 4 shows the result of the Firefox browser presenting this XHTML.

Figure 3: XHTML code using <h1> and <h2> tags in a web document
Figure 3 (heading2.gif)
Figure 4: Firefox Browser Presentation of headdemo2.html
Figure 4 (browser2.gif)
Changing the appearance of headings (e.g. centering, changing fonts, etc.) will be discussed in our CSS (Cascading Style Sheets) discussion.

Lists -- Bulleted and Numbered

We next move to producing lists of items. The XHTML file is listdemo1.html. Figure 5 shows the relevant segment of XHTML code, and Figure 4 shows the result of the Firefox browser presenting this XHTML.

Figure 5: XHTML code for bulleted and ennumerated list in a web document
Figure 5 (list1.gif)
Figure 6: Firefox Browser Presentation of listdemo1.html
Figure 6 (browser3.gif)
As with the heading tags, changing the appearance of lists (e.g. changing fonts, changing bullet shapes, making the list an "inline" list etc.) will be discussed in our CSS (Cascading Style Sheets) discussion.

Notes related to the code in Figure 5:

  • The bulleted list begins with the <ul> (unordered list) tag on line 13 and ends with the closing of the <ul> tag on line 17. Each item in the list is contained within the <li> and </li> tags.
  • As with the bulleted list, the ennumerated list begins with the <ol> (ordered list) tag on line 23 and ends with the closing of the <ol> tag on line 27. Also as with the bulleted list, each item in the list is contained within the <li> and </li> tags.
  • In the second paragraph, line 21 shows the <strong> tags embedded within the <em> tags. It is important to note that the <strong> tab must be closed before the <em> tag in order for the XHTML to be correct i.e., "well formed," something we will discuss later in this series.

Using Dreamweaver to Specify Heading and Lists

Specifying headings in Dreamweaver is simply a matter of selecting the text for which you wish to attach a heading specification and selecting the heading specification you want from Format field in the Properties panel. Figure 7 shows the drop-down list.

Figure 7: Format Drop-Down List -- Heading, et. al. -- for the Properties Panel
Figure 7 (properties1.gif)

Specifying lists using Dreamweaver is equally straightforward. Simply select the lines of text to be in the list (with each item in the list on a separate line, generated by pressing the <Enter> key for each line) and pick the appropriate button on the Properties panel. Figure 8 shows the two buttons.

Figure 8: List Buttons on the Properties Panel
Figure 8 (properties2.gif)

Conclusion

The following might also be helpful:

  • Links to the other modules in this "Web Programming Quick Start" series are available
  • Links to other screen recordings for these modules are also available (time permitting).

Comments, questions, feedback, criticisms?

Send feedback