XHTML Session One

This is the first workshop in this series. Our first task will be to create some content-a standards valid page of XHTML. For me, this is the boring part of the process, akin to stripping paint from a wall before you get to paint the mural. Wow, I'm really selling you on this part of the process! But I want you to realize that first we do the drudge work before we learn the fun stuff (wax on, wax off). To get started, open your resume in whatever file format you have it (I'm assuming its digital, if not, that's o.k.). And then open your web editing software (in my case Adobe Dreamweaver) or a text edit program such as Notepad.

This workshop aims to cover:

  1. Creating, saving, and viewing an XHTML document.
  2. Copying content from an existing document into an XHTML document
  3. Formatting content with the basic XHTML tags
    • <p>
    • <h#>
    • <ul> and <li>

Setting Up Our Workspace

Not to be a tyrrant, but before we start coding, I'd like to suggest how we should set up our screens. This will make it easier for me to refer to things throughout this section of the tutorial. I regularly work on both a Mac and PC, so you should be able to achieve this set-up with either. Our screen should look like this (those familar with manipulating Window sizes can skip down to the next section).

If using Dreamweaver, pressing F4 will maximize screen space.

  1. We'll want Dreamweaver or our text edit program to take up the left-half our our screen. Make sure you "Restore Down" your windows (if on a PC) before attempting to resize.
  2. Next, if using Dreamweaver, press F4. Will "hide" all other panels. Since today we will be using Dreamweaver exclusively for coding content, we want the main section of the page to take up as much room as possible.
  3. Finally, resize your webbrowser to fit in the other side of the screen. If you are using this tutorial online (remember, it auto-formats to print! Just hit "File>Print"), then you might want to split the right side of the screen vertically- put an empty window on the top half and this tutorial on the bottom (and remember, you can adjust the text size by pressing either CTRL / Open Apple and + or -).

Creating an XHTML document

Now we are ready to create our first XHTML page. Here's where Dreamweaver will be our friend and do a bunch of work for us.

  1. Simply select "File > New" and a dialogue box will open.
  2. In the dialogue box, select "Basic Page" and "HTML" page--but don't hit create yet!
  3. In the DTD field right above the "Create" button, select "XHTML 1.0 Strict." The full discussion of what this means is too technical for here--suffice to say that Dreamweaver will create a line in the <head> that tells web broswers to interpret our content according to XHTML guidelines. Now push "Create" and you should see a blank XHTML document. From the menu bar, select "View > Code."
  4. In the Code view, click your cursor between the <body> tags and type the following code:

    <body>
    <p> I rock </p>
    </body>

Those not using Dreamweaver need not fear--life is not hopeless. But this will require a bit more work on your part.

  1. Begin by typing the following (don't worry about what it all means at this point):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>
    </head>

  2. Now that we have a head, let's create the body. Type exactly what appears above, so that your entire document reads:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>
    </head>

    <body>
    <p> I rock </p>
    </body>

Regardless of how you made it this far, we now need to save our work and check it in our browser.

  1. In Dreamweaver, simply select "File > Save As." This will allow you to give a file name (I'm saving mine as "resume_draft01.html" in accordance with Karl Stolley's recommendations for file names for sustainable web design).
  2. If you are using a text edit program, this is almost as easy. Using Windows Notepad, I can choose "File > Save" and type in "resume_draft01.html"; the only difference here is that I have to change "File Type" from .txt to all files.
  3. Now lets move over to our browser. Even though our page is not on the web, we can get a preview. Under the File menu, select "Open file." Poof! You rock.

Transfering a Print Resume to XHMTL

There's two ways to go about this--the "cut-n-paste-n-code" and the "code-from-scratch." Because I think most of us will already have a print resume saved as somekind of .doc, I'm going to start with the "cut-n-paste-n-code" method. And, since I will be giving a number of examples as we go, I am going to stop providing instructions for those people using not using Dreamweaver except when absolutely necessary. You should be able to "reverse engineer" from all the code examples below.

Cut-n-Paste-n-Code

  1. First, we need to copy all the content we want to appear on our XHTML page. Go the the document version of your resume, select all the text (either by using "Edit > Select All," or pressing "CTRL + A." Next, don't forget to copy that information--either by right-clicking and selecting "Copy" or by pressing "CRTL + C" while the information is highlighted.
  2. Now let's move over to our XHTML document. Delete "I rock" from the body, insert your cursor between the body tags, and paste in the info on your clipbooard (press either "CRTL +V" or right-click and select "paste"). although formatted in Dreamweaver, my code is one big hunk of babble in Firefox.
  3. Although your text might look formatted in Dreamweaver or Notepad, if you save it and preview the page in your browser you will see a solid mass of unformatted text. Whatever are we to do? Code it, that's what!

Coding

This next section will take you through coding the various parts of your resume. I am going to be working through the following material (the first twenty lines of my resume), showing you how to use the basic content tags. Though our content might differ, I imagine the prinicple should not be too far off. Here's the content I'll be working with:

Marc C. Santos Curriculum Vitae 3413 Hunter Rd. West Lafayette, IN 47906 Email: mcsantos@purdue.edu Homepage: http://web.ics.purdue.edu/~mcsantos/ Education Purdue University 2003- Present Ph.D. Student Primary: Rhetoric and Composition Secondary: Theory and Cultural Studies, Digitality Boston University 1999-2000 Master of Arts Focus: 18th Century British Literature Clark University 1994-1998 Bachelor of Arts in British Literature Cum Laude, Phi Beta Kappa, Highest Honors in English Senior Thesis: Sonnet Variance in the Early 20th Century

  1. If your resume looks like mine, then the first thing on the top is your name. As it should be, this is the most important piece of information on the document. Thus we want our name to be the largest heading on the page--we will use the h1 tag.

    <h1>Marc C. Santos / Curriculum Vitae</h1>

    When writing XHTML, we have to be sure we open and close every tag we use. The <h1> opens this heading tag, the </h1> closes it (the backslash indicates a close). Any information appearing between those tags will display as a main heading. Browsers have default settings for such tags, but we will control the appearance of our headers later through CSS.
  2. The next information in my resume is my address--for this I'm going to use a paragraph tag, since this is non-list information. Although an address might appear as a list, semantically (in terms of its meaning), it isn't (in my opinion anyway--and no one is going to come breaking down your door if you code it as a list). Here's my next bit of code:

    <h1>Marc C. Santos / Curriculum Vitae</h1>
    <p>3414 Hunter rd. West Lafayette IN 47906 Email: mcsantos at purdue.edu Homepage: http://web.ics.purdue.edu/~mcsantos</p>

Now let's save our document and preview it in the browser. Earlier I said that we were going to concern ourselves only with content today--but I lied. We are going to address one form issue--and that's line breaks in bewteen the components of our address. Line breaks don't include addition spaces, rather they break and distinguish information. So, although they might be primarily visual, they are also semantic, since they order and arrange our content.

  1. the XHTML tag for a line break is <br />. We don't need a second closing tag since the backslah is already in the tag--one does the job of two. I'm going to insert line breaks into my code:

    <h1>Marc C. Santos / Curriculum Vitae</h1>
    <p>3414 Hunter rd<br />
    West Lafayette, IN 47906 <br />
    Email: mcsantos at purdue.edu <br />
    Homepage: http://web.ics.purdue.edu/~mcsantos</p>

  2. Save, preview if you want, and then lets keep going. My vita does not include an objective statement, but this one should be easy--it would simply go between paragraph tags. Open a new paragraph tag, then go to the end of your objective statement and close that paragraph tag.

    <h1>Marc C. Santos / Curriculum Vitae</h1>
    <p>3414 Hunter rd<br />
    West Lafayette, IN 47906 <br />
    Email: mcsantos at purdue.edu <br />
    Homepage: http://web.ics.purdue.edu/~mcsantos</p>
    <p>Objective: Put a specific, applicable statement here. Avoid cliché generalities.<p>

  3. My next big section is an education section. While this is an important section, its not as important as my name, so I am going to tag it as a subheader, using the h2 tag. Here's the code:

    <h1>Marc C. Santos / Curriculum Vitae</h1>
    <p>3414 Hunter rd<br />
    West Lafayette, IN 47906 <br />
    Email: mcsantos at purdue.edu <br />
    Homepage: http://web.ics.purdue.edu/~mcsantos</p> <p>Objective: Put a specific, applicable statement here. Avoid cliché generalities.</p>
    <h2>Education</h2>

  4. Unlike with my personal information, now I am definately going to use a list--a list of the schools I have attended. If I want this information to appear in a list, then I have to use the ul and li tags. In fact, this is going to get complicated, since I am going to have to put lists inside of lists. I'll take it one step at a time. First, I am going to create a list of the schools I have attended. Because these are a bit tricky, I have annotated the code below:

    <h1>Marc C. Santos / Curriculum Vitae</h1>
    <p>3414 Hunter rd<br />
    West Lafayette, IN 47906 <br />
    Email: mcsantos at purdue.edu <br />
    Homepage: http://web.ics.purdue.edu/~mcsantos</p>
    <p>Objective: Put a specific, applicable statement here. Avoid cliché generalities.</p>
    <h2>Education</h2>
    <ul>
    The <ul> tag opens an unordered list; we don't close it until after our list is complete. Notice how every line item opens and closes. After the final line item, I close the unorder list with </ul>. <li>Purdue University</l1>
    <li>Boston University</l1>
    <li>Clark University</l1>
    </ul>

  5. Now its going to get even trickier--but the good news is that this is just about as tricky as XHTML gets. I want to list information about my stay at each school (duration, title, major, etc.) under each school. This means creating a new unorder list inside a list item. It will be far easier for me to show rather than tell (I am only going to do Purdue first):

    <h1>Marc C. Santos / Curriculum Vitae</h1>
    <p>3414 Hunter rd<br />
    West Lafayette, IN 47906 <br />
    Email: mcsantos at purdue.edu <br />
    Homepage: http://web.ics.purdue.edu/~mcsantos</p>
    <p>Objective: Put a specific, applicable statement here. Avoid cliché generalities.</p>
    <h2>Education</h2>
    <ul>
    <li>Purdue University
    <ul>
    <li>2003-Present</li>
    <li>Ph.D Student</li>
    <li>Primary: Rhetoric and Composition</li>
    <li>Secondary: Theory and Cultural Studies, Digital Media</li>
    Notice that after I have completed all the line items for this unordered list, I close it. Then I close the "Purdue University" line item. Then I can start a new line item--"Boston University." The Purdue University line item closes only after it, and all the information pertaining to it, is finished. </ul>
     </li>
    <li>Boston University</li>
    <li>Clark University</li>
    </ul>

  6. Now I code Boston University and Clark University in a similar fashion.

    <h1>Marc C. Santos / Curriculum Vitae</h1>
    <p>3414 Hunter rd<br />
    West Lafayette, IN 47906 <br />
    Email: mcsantos at purdue.edu <br />
    Homepage: http://web.ics.purdue.edu/~mcsantos</p>
    <p>Objective: Put a specific, applicable statement here. Avoid cliché generalities.</p>
    <h2>Education</h2>
    <ul>
    <li>Purdue University
    <ul>
    <li>2003-Present</li>
    <li>Ph.D Student</li>
    <li>Primary: Rhetoric and Composition</li>
    <li>Secondary: Theory and Cultural Studies, Digital Media</li>
    </ul>
    </li>
    <li>Boston University
    <ul>
    <li>1999-2000</li>
    <li>Bachelor of Arts in British Literature</li>
    <li>Focus: 18th Century British Literature</li>
    </ul>
    </li>
    <li>Clark University
    <ul>
    <li>1994-1998</li>
    <li>Bachelor of Arts in British Literature</li>
    <li>Cum Laude, Phi Beta Kappa, Highest Honors in Englsih</li>
    <li>Senior Thesis: Sonnet Variance in the Early 20th Century</li>
    </ul>

    Phew! That's a good amount of work... the good news is that we are almost done! Already you have all the tags you should need to code the rest of your resume. My next step further complicates things for those who think they are going to want more control over the look and feel of their page... if you've had enough, then code up the rest of your resume using the p, h, and ul / li tags and then move on to step eight.
  7. Insanity: lets put a list within a list within a list. There is actually a semantic justification for this move: in my lists above, information about when I was with a certain school appears on the same level (alignment) as information about what I did while at that school. I want to separate this information semantically. So I'll put them on different list levels. Here goes, I'm going to zoom in on my "Purdue University" line item:

    <ul>
    <li>Purdue University
    <ul>
    <li>2003-PresentAs with our last step, we move the close tag for this list item down and put in a new unordered list. We then close that list, then the "2003-Present" line item. Make sense?
    <ul>
    <li>Ph.D Student</li>
    <li>Primary: Rhetoric and Composition</li>
    <li>Secondary: Theory and Cultural Studies, Digital Media</li>
    </ul>
    </li>
    </ul>
    </li>
    <li>Boston University

    Now I make this change to my other top-level line items: Boston University and Clark University. After some work, I'm looking like this:

    <h1>Marc C. Santos / Curriculum Vitae</h1>
    <p>3414 Hunter rd<br />
    West Lafayette, IN 47906 <br />
    Email: mcsantos at purdue.edu <br />
    Homepage: http://web.ics.purdue.edu/~mcsantos</p>
    <p>Objective: Put a specific, applicable statement here. Avoid cliché generalities.</p>
    <h2>Education</h2>
    <ul>
    <li>Purdue University
    <ul>
    <li>2003-Present</li>
    <li>Ph.D Student</li>
    <li>Primary: Rhetoric and Composition</li>
    <li>Secondary: Theory and Cultural Studies, Digital Media</li>
    </ul>
    </li>
    <li>Boston University
    <ul>
    <li>1999-2000
    <ul>
    <li>Bachelor of Arts in British Literature</li>
    <li>Focus: 18th Century British Literature</li>
    </ul>
    </li>
    </ul>
    </li>
    <li>Clark University
    <ul>
    <li>1994-1998
    <ul>
    <li>Bachelor of Arts in British Literature</li>
    <li>Cum Laude, Phi Beta Kappa, Highest Honors in Englsih</li>
    <li>Senior Thesis: Sonnet Variance in the Early 20th Century</li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>

    Here's where Dreamweaver can be a friend again. Save, and then choose "Commands > Apply Source Formatting." Dreamweaver will configure your code text and make it easier to read. If you have created several lists within lists (called "nested lists"), then Dreamweaver will automatically indent them to make them easier to follow. Save, preview, and congratulate yourself.
    applying source format can make it easier to see what's going on in your code.
    Helpful!
  8. Now its time for the homework--finish converting all the content in your resume to XHTML I used the same nested list design for my "Experience" section and then included a "Publications" and "Presentations" section. The full code for my finished XHTML document is provided below. I also provide a link to the file.
  9. Once your finished coding, you'll want to check your code using the World Wide Web Consortium's HTML validator. If everything goes according to plan, you should see a friendly green bar informing you that "Your page validates as XHTML 1.0 Strict." Hooray for you.
    everybody's working for the green strip... oh, well, there's few things as pleasant as a valid green strip
    If you have made a mistake (and I virtually always have at least one mistake), you'll get a less-than-friendly red bar informing you that "Your page is not XHTML 1.0 Strict."
    although it stings a bit, failing a validation is not the end of the world.
    What is friendly about the validator is that it will tell you 1) how many errors your code contains, 2) what lines those errors appear, 3) some information regarding the nature of your errors (although there is a serious rhetorical problem here, since anyone capable of deciphering these error messages probably doesn't need any help to begin with...). If you have trouble with a mistake, my advice is to try and use Google to help find more information. Also, showing your code to someone else can be extremely helpful, often another person will quickly identify the "blips" that an author's eyes pass right over.

Final Thoughts

That wraps-up our first major challenge--creating a standards compliant page of XHTML Strict. Chances are today was a lot of hard work to create something that isn't all that exciting. The next section discusses how to apply formatting to this document, that's when we get to begin playing with the fun stuff.