Introduction: How to XHTML and CSS

This introduction will not address why you would want to create standards-based websites. First, I imagine if you have made it this far, then you already have some interest. Second, many others have already done a better job detailing the reasons for adhereing to web standards than I could. If you want o read nuanced and sophisticated arguments for the endorsement of web standards, then examine... I'll simply assume that you are interested in creating web pages that load quicker, look nicer, update easier, provide improved accessibility to the vision impared, and display more uniformly than anything created with FrontPage, tables, or stylized HTML.

The tutorials here are aimed at those new to XHTML and CSS- be they student or teacher. My hope is that such a work could be used in both professional writing and multimedia writing courses as a next step in developing professional materials. What separates this tutorial from most is that we will be working with a very specific end point in mind: the creation of a professional web presence. Throughout the first four chapters I (re)-build my actual "professional web presence": starting with a resume (in academia referred to as a "vita"), I will move step by step to the creation of my actual professional site, coding both content (XHTML) and form (CSS). In a sense we will be "reverse engineering this site--anyone who wants to view the finished XHTML code can skip to the appendix or view the code in a browser. A link to the finished CSS code is provided here.

While I will explicate some of my design decisions, any work with this material should be accompanied by research into visual rhetoric- be it an introductory work such as Robin Williams' Non-Designers series (good introduction for students of all levels), something more comphrensive such as David Blakesley's new Thompson's Handbook (ideal for a professional writing class since it contains a wealth of resources on visual rhetoric, professional genres, and writing style and grammar), or a design-oriented text such as Robin Landa's Graphic Design Solutions (which is what I use with my multimedia writing class). No amount of technical proficiency will make up for a lack of rhetorical awareness of design principles regarding color, typography, alignment, balance, whitespace, etc. I have included an appendix of online resources to and encourage anyone using this text to send me more!

This guide was designed with Adobe's Dreamweaver in mind, but every section includes extra instructions for those coding without the aid of such a program. I will keep my techno-lingo to a minimum, do my best to provide rollover definitions of technical terms, and annotate difficult issues in the margin. I will also provide illustrations whenever possible. Coding will be presented in steps--new code will always be highlighted yellow for easy reference.

A guide is just that - a guide, it is not a map. I will only be able to show you a portion of the terrain, the rest you will have to explore yourself. I will try, wherever possible, to point you in the right directions. But in no way do I assert to make you an expert in XHTML and CSS (nor do I claim to be one myself!). Rather, if you finish these tutorials, then you will have a polished and presentable web presence. That much I can guarantee.

Just Enough Terminology and Background to Get Us Going

For some this might be too simple an introduction-but I want to start with the basics. Anyone familar with how a web browser works or what distinguishes XHTML from HTML can skip to the next section.

How does a web page work? For those unfamiliar, your web browser, be it Internet Explorer, Firefox, Safari, Opera or whatever translates HTML into the visual display you see on your screen. (X)HMTL works bywrapping content in Mark-Ups which identify that content as paragraphs, blockquotes, headings, etc. These Mark-Ups are effectionately referred to as tags. Go to any webpage, go to "View>" and choose "Source" (in IE) or "Page Source" in Firefox. Presto-here's the base code that your browser is converting to what you see on your screen. If you are using Firefox, then this coding will be color-coded (plugins for IE and Safari are available). This color-coding feature is invaluable when you are looking at code (a vision of our future).

All source code is contained within two major tags: first there is <head> tag. Anything appearing in between the <head></head> tags is only seen by the computer, this information is not explicitly visible on your screen. Moreover, this information tells the browser how the information between the other category of code, between the <body></body> tags, should appear. So, in a sense, we can think this way: <head> contains information about FORM, <body> contains information about CONTENT. Romanticists, but contemporary web practice should be anything but organic. Because contemporary web browsers, blackberrys, printers, etc. all display form differently, we want to be able to separate form from content. Apologies to the This way, we can create multiple forms for the same content. That's what standards-based development is about-the absolute separation of form and content.

XHTML is a very specific way of formatting HTML pages so as to keep form and content separated. A lot of HTML pages, especially those created during the early oughts, rely on table-based layouts and designs. This approach, although easy for the novice, hopelessly integrates form and content to the point that pages become extremely difficult to update (again, there's a lot of other problems, but I am trying to keep discussions of why to a minimum). My goal is to break XHTML develop down into digestible bits to improve the overall quality of the web.

To review, here's our requisite lingo:

XHTML
The code that consitutes the content of a web page.
CSS
The code that controls the appearance of a web page (or multiple pages-- in this guide we will create 3-5 XHTML pages that all use a single CSS page, sort of... )
Web Browser
The program you use to view an XHTML page. Not all browsers translate CSS the same way--so while the standard three are Internet Explorer, Firefox, and Safari, IE displays pages a bit differently than most other browsers. Chapter six will explain how to deal with these display issues. I will be using Safari and Firefox for my demonstrations; if you are using IE, your pages might look different than mine. My advice is to stop using internet explorer and download Firefox. Its more secure, has a tabbed browsing feature, and has a pleothora of downloads to maximize your surfing experience. Did I mention its free?

Suffice for our work, we need a page of XHTML content before we can begin to design. So on we go to Section 2.