Module Map

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 2: Firefox Browser Presentation of headdemo1.html

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 4: Firefox Browser Presentation of headdemo2.html

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 6: Firefox Browser Presentation of listdemo1.html

Notes related to the code in Figure 5:

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

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

Conclusion

The following might also be helpful: