Skip to content Skip to navigation

Connexions

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

Navigation

Lenses

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.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

This content is ...

In these lenses

  • bethelwebdesign display tagshide tags

    This module is included inLens: Susan McClements's Lens
    By: Susan McClements

    Click the "bethelwebdesign" link to see all content selected in this lens.

    Click the tag icon tag icon to display tags associated with this content.

Recently Viewed

This feature requires Javascript to be enabled.

Tags

(What is a tag?)

These tags come from the endorsement, affiliation, and other lenses that include this content.

Web Programming Quick Start: XHTML -- Headings and Lists

Module by: Ronald Sawey. E-mail the author

User rating (How does the rating system work?)
Ratings

Ratings allow you to judge the quality of modules. If other users have ranked the module then its average rating is displayed below. Ratings are calculated on a scale from one star (Poor) to five stars (Excellent).

How to rate a module

Hover over the star that corresponds to the rating you wish to assign. Click on the star to add your rating. Your rating should be based on the quality of the content. You must have an account and be logged in to rate content.

:
(0 ratings)

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).

Content actions

Give Feedback:

E-mail the module author | Rate module ( How does the rating system work?)

Rating system

Ratings

Ratings allow you to judge the quality of modules. If other users have ranked the module then its average rating is displayed below. Ratings are calculated on a scale from one star (Poor) to five stars (Excellent).

How to rate a module

Hover over the star that corresponds to the rating you wish to assign. Click on the star to add your rating. Your rating should be based on the quality of the content. You must have an account and be logged in to rate content.

(0 ratings)

Download:

Module PDF

Add module to:

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 (?)

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.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks