Module Map Introduction Dreamweaver The "Sine Qua Non" XHTML Tags The and Tags Conclusion

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. A screen recording, demonstrating the material in this module is also available (time permitting).

Dreamweaver Although the work discussed here can be done with any text editor, and there are also many X/HTML generators, we will use Adobe's Macromedia Dreamweaver 8 for generating our HTML. However, at each step, we will discuss the XHTML code, generated by Dreamweaver. One reason for using Dreamweaver in this discussion is that it will be very helpful when we discuss Cascading Style Sheets (CSS). Once you have started Dreamweaver (we are assuming a Microsoft Windows operating system), click on: File/New on the menu bar. shows the resulting dialog box.

Dreamweaver's New Document Dialog Box Choose "Basic page" from the Category column and "HTML" from the Basic page column, and click on: . shows the Dreamweaver working environment. Throughout this "Web Programming Quick Start" series as we discuss XHTML generation by Dreamweaver, we will use the terms shown in this figure.

Dreamweaver's Working Environment To get a look at the XHTML code generated by Dreamweaver, click on the button, on the Document Toolbar. shows the resulting Document Window.

Dreamweaver's Initial XHTML demo1.html shows the file thus far. View/Page Source (in the Firefox browser) will show the XHTML code.

The "Sine Qua Non" XHTML Tags We now discuss each line of the XHTML code shown in . Although there are comments associated with lines 1, 2 and 4, they are not the primary focus here. The "<" and ">" angle brackets, along with the text contained between them are called "tags," e.g. <body> . Line 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XH...> tells the browser what kind of file follows. We will omit a detailed discussion at this point. Line 2: <html xmlns="http://www.w3.org/1999/xhtml"> The < html part begins the XHTML "tags," and the remainder of the line, provides information to the browser concerning the "XML Namespace" associated. As with Line 2, namespace discussion is beyond the scope of our work, and both lines 1 and 2 should be taken as "boilerplate." Line 3: <head>This begins the "head" section of the web document. This section contains material that does not appear in document window of a browser, but generally contains information used by the browser. Line 4: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> As with lines 1 and 2, we take this as "boilerplate," generated by Dreamweaver to make the code XHTML compliant. Line 5: <title>Untitled Document</title> Text contained between <title> and </title> tags appears in the title bar of the browser. Our next step will be to change this to something more "meaningful." Line 6: </head> This ends the head section of the document Line 7: Blank line for readability. Line 8: <body> This begins the "body" section. This is where the material appearing in the browser window is specified. Line 9: </body> Closing of the body of the document. Since there is nothing between the beginning and the end of the body tags, the browser will show a blank document Line 10: </html> This final tag closes the XTHML document, as well as closing the <html> tag opened in line 2. After Line 1, each tag discussed has an opening, < ... >, and a closing </...> tag. This is true of all XTHML tags that contain text between their opening and closing, i.e. "non-empty" tags. To emphasize the overall structure, shows the XHTML tags without the recommended "boilerplate," that is required to make the file an XHTML file, rather than an HTML file.

Dreamweaver's Initial XHTML, without "boilerplate" Let's now put two paragraphs in the body of our document and change the text between the title tags. We will get our paragraphs of text from lipsum.com. shows the XHTML code and shows the result displayed in the Firefox browser.

Adding text to the body and changing the title

Browser view for demo2.html demo2.html shows the file thus far. Recall, View/Page Source (in the Firefox browser) will show the XHTML code. You will notice that although the two paragraphs in the source code (demo2.html) are separated by a blank line, they appear as one in the browser. This demonstrates an important point: Browsers put all text together unless specified otherwise by XHTML code. Blank lines are ignored, and the text is "flowed" to fit the browser window. Although it is not shown here, all consecutive blanks and/or tabs are represented by a single space in the browser, unless specified otherwise by XHTML code. shows the insertion of the and , "paragraph," tags at the beginning and end of each of the two paragraph and shows the result in the Firefox browser.

Adding and to each Paragraph

Browser view for demo3.html demo3.html shows the file constructed thus far. Recall, View/Page Source (in the Firefox browser) will show the XHTML code.

The and Tags We will conclude this section by discussing two more XHTML tags for "emphasizing" certains segments of text. These are the and and tags. To distinguish between the two, Andrew (p. 66) suggests the following: "Think of as a loud, slow voice, and and as a raised tone of voice." shows the insertion of the and tags. is used in the first paragraph and is used in the second paragraph, and shows the result in the Firefox browser.

Adding and tags

Browser view for demo4.html demo4.html shows the file. Recall, View/Page Source (in the Firefox browser) will show the XHTML code.

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