Intermediate XHTML Session

Today's session focuses on expanding our XHTML knowledge base. We are going to work with several new tags and finish semantically "carving up" our document into divisions. This will give us far more control over the presentation of our document during our next CSS session.

Today we will learn:

Using the strong, empahsis, cite, and acronym tag

Most people are already familiar with bold face and italicized text, but we want to make sure that we are using these tags semanitically rather than for presentation--that is, when we use the strong tag we should be using it to stress important information rather than to increase the size or weight of text. Same thing with the emphasis tag--it should help to qualify information rather than present it. This does not mean that italics cannot be used during presentation--but this should take place through CSS rather than through our XHTML.

Using the <strong> and <em> tags are quite simple--whatever text appears between an open and close <strong> tags willby default appear as a heavier weight</strong>. Whatever appears between <em>tags will by default in italics</em>. We can later control how these will appear (for instance, to differeniate emphasis from citations, I often change the behavior of my emphasis tag to a different color.

Speaking of the citations tag, this one can be used to, well, you guessed it, mark a citation. Imagine a future where you ask a web browser to collect all the materials marked with a <cite> tag on a website--poof! Instant bibliography. By default, the <cite>tag will italicize any text</cite>.

The <acronym> tag is very useful, but is a little more complicated. If you use an acronym in your web resume, or any other page, you can code a rollover that details the acronym, such as XHTML. The code looks like this: <acronym title="eXtensible HyperText Mark-up Language">XHTML</acronym>. And, of course, we can later manipulate the appearance of our acronyms.

Creating a Navigation System

My experience is that creating a navigation division is (relatively) easy--creating a good navigation division is really hard. Its a matter of trial and error--figuring out how to design a navigation system that is useable and can expand as your site expands. Coding the navigation division in XHTML isn't the hard part-- its designing the placement and look of the navigation system that presents the biggest challenge. Fortunately, we're not dealing with that until next session! Today we are going to:

  1. Create a navigation division
  2. Create a <ul> that lists our pages
  3. Insert links to these pages

Creating a Navigation Division

Open one of your XHTML documents you prepared for today-- I'm going to work with my resume. We will code one of these pages, and then copy and paste the completed code into the other pages.

  1. In our last session, we coded a header division into our resume. Here's what that code looked like:

    <div id="container">
    <div id="header">
    <h1>Marc C. Santos Curriculum Vitae</h1>
    <p>3413 Hunter Rd. <br />
    West Lafayette, IN 47906 <br />
    Email: mcsantos@purdue.edu<br />
    Homepage: http://web.ics.purdue.edu/~mcsantos/ </p>
    </div>

    And then the rest of our document.

  2. Lets start by adding another division to our code. This division will start right after our header ends.

    <div id="container">
    <div id="header">
    <h1>Marc C. Santos Curriculum Vitae</h1>
    <p>3413 Hunter Rd. <br />
    West Lafayette, IN 47906 <br />
    Email: mcsantos@purdue.edu<br />
    Homepage: http://web.ics.purdue.edu/~mcsantos/ </p>
    </div>
    <div id="navigation></div>

    Easy, right? Now this division is empty-- if you view your page in a browser you wouldn't see any visible change.
  3. Next, we'll put an unorderd list into our navigation division; this isn't anything new, by now you have probably created a number of unordered lists. The challenge is in developing single word or short phrase names for your pages. For my professional site, I am going to have a link to my vita (or resume), a design portfolio, and a teaching portfolio. I also have a "home" business card style page, a coursework page, and a links page. So my navigation division looks like this:

    <div id="container">
    <div id="header">
    <h1>Marc C. Santos Curriculum Vitae</h1>
    <p>3413 Hunter Rd. <br />
    West Lafayette, IN 47906 <br />
    Email: mcsantos@purdue.edu<br />
    Homepage: http://web.ics.purdue.edu/~mcsantos/ </p>
    </div>
    <div id="navigation>
    <ul>
    <li>Home</li>
    <li>Vita</li>
    <li>Coursework</li>
    <li>Teaching Portfolio</li><
    <li>Design Portfolio</li>
    <li>Links</li>
    </ul>
    </div>

Linking up our pages

Now its time to use a new tag, the <a> or anchor tag.

  1. Links work like virtually any other tag--but we will especially draw on the example of the acronym tag we used earlier today.
  2. A completed link looks like this:

    <a href="http://www.x.com">Text of the link</a>

    Today we will be coding our navigation tab, so our link text is already provided. Due to accessibility standards and the ways screen readers work, you should avoid using text such as "click here" for links. For more information on web accessibility, consult these texts.
  3. Our links will be a bit different today then the one in the example above, since we are linking to files internal to our own site. Rather than putting in an http address, I'll be putting in the file location of my other XHTML files. I am saving all of my pages together, in the same level of the same folder; my list looks like this:

    <div id="container">
    <div id="header">
    <h1>Marc C. Santos Curriculum Vitae</h1>
    <p>3413 Hunter Rd. <br />
    West Lafayette, IN 47906 <br />
    Email: mcsantos@purdue.edu<br />
    Homepage: http://web.ics.purdue.edu/~mcsantos/ </p>
    </div>
    <div id="navigation>
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="vita.html">Vita</a></li>
    <li><a href="coursework.html">Coursework</a></li>
    <li><a href="teaching_portfolio.html">Teaching Portfolio</a></li><
    <li><a href="design_portfolio.html">Design Portfolio</a></li>
    <li><a href="links.html">Links</li>
    </ul>
    </div>

  4. I would direct attention to two points: first, notice that I use the filename "index" for my home page. This is because many commercial, corporate, and educational servers use the index designation as the root of a site--in other words, whatever file is saved as "index" will be the page that appears as the home of the site. Second, notice that I didn't use a space in my file name--web browsers don't always do well interpreting spaces- its good practice to use a hypen or an underscore if you need to put a space in a file name.
  5. Now we are ready to put this navigation division into our other pages. Simply copy the code and paste it into your other files. Remember to becareful with placement (and, if you are using Dreamweaver, make sure you are working in the code view in all your other pages!). Once you paste the code, save all your files. Now its time to insert two more divisions.

Creating a content division and a footer division

We do not need to create these divisions for our page to operate--but putting in these divisions will give us a tremendous amount of flexibility with our layout and presentation. This step will be quite easy, but extremely important for our next CSS session.

  1. After our navigation division, we will create a content division which "tags" all of the content unique to a page. This division should begin right after the end of our navigation division and should end right before the container division closes.
  2. Now let's put in that footer division. Here's an abbreviation of all the code on my vita (abbreviated in that I have shrunk the content and navigation divisions). Here's the structure of my page:

    <body>
    <div id="container">
    <div id="header">
    <h1> Marc C. Santos Cirriculum Vitae</h1>
    </div>
    <div id="navigation">
    <ul>
    <li><a href="index.htm">Home</a></li>
    <li><a href="vita.html">Vita</a></li>
    <li><a href="coursework.htm">Coursework</a></li>
    <li><a href="teaching.html">Teaching</a></li>
    <li><a href="links.htm">Links</a></li>
    </ul>
    </div>
    <div id="content">
    <h2>Marc C. Santos</h2>
    <p> PhD. Student Rhetoric &amp; Composition <br />
    </p>
    <h2>Education</h2>
    <ul>
    <li>Purdue University
    <ul>
    <li>2003- Present
    <ul>
    <li>Ph.D. Student</li>
    <li>Primary: Rhetoric and Composition</li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    <div id="footer"></div>
    </div>
    </body>
    </html>

    Notice that the close "tag" for the container division does not come until afterthe footer division closes. This means that all the other divisions are "contained" in the division container.
  3. Every page in our site will present the information in our heading, navigation, and footer divisions. The content division will contain all the information that is unique to that pageThinking about the structure of our document, here's what we have:
    • body (everything that appears on the screen)
      • container division (all content on a page)
        • header
        • navigation
        • content
        • footer
    the body division constitutes everything on the screen and the container division houses all the contet on the page--the header, navigation, content and footer divisions Notice that our container division contains all the other divisions on our page--this way we can make "global" changes to our container that will cascade to all our other divisions. But that gets into next workshop (the fun stuff!), we still have a bit of work to do.

Including a Validation link

Once we have finished all our coding, we want to run our pages through the w3c validator again. This time, however, we are going advertise the quality of our pages by using the validated page link that the w3c provides.

  1. First, validate your pages by inputting the URL or uploading the file.(Argh! The draft of this page pops up with 33 errors... time to solve the XHTML puzzle, 32 of these errors stem from 4 missing close paragraph tags, another string of errors stem from me typing l1 instead of li--code is unforgiving)
  2. Once your code validates, find the following code on the friendly green validation page. Here's what you are looking for:

    <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
    src="http://www.w3.org/Icons/valid-xhtml10"
    alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
    </p>

    Copy this code.
  3. Now paste this code into your footer division. This code does two things--first it displays an image (we will discuss the image tag more in our next XHTML session) and second it creates a link to the w3c validation of our page. This is a great way to advertise to visitors that we care about web standards and accessibility (although web standards does not ensure accessibility, they provide a solid foundation toward creating an accessible site, check the resource appendix for more information).
  4. You should see an image that looks like this:
    Valid XHTML 1.0 Strict
  5. If this image isn't to your liking, you can make a text link to the validation page. This is the kind of link I use on these pages. The code for a text link looks like this:

    <a href="http://validator.w3.org/check?uri=referer">XHTML</a>

    Essentially all I have done is replaced the information in the image tag with the text "XHTML."

Controlling our navigation display in CSS

We've worked hard today, so here's one final bonus for today.

  1. In our Cascading Style Sheet, after our container code but before our paragraph code, enter the following code:

    div#navigation {
    border-bottom:1px solid #666666;
    }

    Nothing really new here--this is a refresher on what we did last session.
  2. This is something new:

    div#navigation ul {
    list-style-type:none;
    }

    This might not seem like a big deal--but, trust me, it is! What we have just done is selected andy unordered list within the navigation division, and only within the navigation division. This means that we can set ul's in other divisions to still display vertically.
  3. Next, let's control the display of our navigation. Rather than having our navigation display vertially, let's have it display horizontally.

    div#navigation ul li {
    display:inline;
    border-bottom:1px solid #666666;
    }

    This is a more specific selection method than anything we used in our first CSS session. The first line of code tells a browser to apply the properties in the brackets to any line item in an unordered list within the navigation division, and only within the navigation division. You should begin to sense how much control we have over the presentation of our document, but I pick this thread up later. Now, let's do a little more selecting.
  4. Add this code:

    div#navigation ul li a, a:visited {
    text-decoration:none;
    color:#CCCCCC;
    padding:3px;

    }

    Here our selector is even more specific--now we are instructing the web browser to apply the bracketed code to an anchor (link) within a line item ul within the navigation division.Setting text-decoration:none means that our navigation links will no longer be underlined.
  5. Our next step will take us into the realm of the uber-cool. We are going to create a basic rollover effect for our links. By default, links come with four states--in the previous step, we set the color and text-decoration for two of these states--the normal state (just a) and the visited state(a:visited--this is a link that a visitor has previously visited). Now we will address the other states, and by making a few easy changes will create a rollover effect:

    div#navigation ul li a:hover, a:active {
    background-color:#000033;
    color:#D2D6E2;
    }

    When you save and preview--poof! The background and text colors invert when the cursor roles over a link. And now you might understand why I put those three pixels of padding into all the link states (I put this in during the previous step, and it, of course, cascades down to the hover/active state... but you already knew this (right?)
  6. Next, let's put some separation between our navigation links:

    div#navigation ul li a, a:visited {
    text-decoration:none;
    color:#CCCCCC;
    padding:3px;
    border-left:#666666;
    }

For next section: Today we added divisions and a navigation division to one of our XHMTL documents. Now you add these updates to all the other pages in your site. By next session you should have a fully-functional, standards validated XHTML website. Our next section will design a new CSS for this site (not entirely from scratch) that uses image replacement for backgrounds.