westciv downloadable courses

html and xhtml

To give you a feel for the how the course works here's the chapter where you'll learn how to use <div>s and <span>s together with the class attribute.

Generic document structure

Before we move on from the subject of structuring documents with HTML, let's look briefly at the idea of generic structure. We've seen that HTML has elements for paragraphs, emphasis and so on. What happens when we have a kind of information which is not catered for by an existing element? Let's face it, HTML is a relatively simple set of elements. It can't possibly contain elements for every kind of information required for every purpose.

Suppose we want to markup a recipe, with ingredients, steps in the method, and so on. Sadly, we can't just create an <ingredient> element and a <step> element (though with XML (eXtensible Markup Language) we can do just that). We can however do something close. HTML provides two generic container elements, the div and the span. The div is a generic block element, while the span, as you might have guessed, is a generic inline element. What do we mean by generic? Well, with elements like paragraph or quote, there is a kind of meaning that the element itself has. If I ask, "what is a quote?", then there is a commonly understood answer. We say that these elements have a semantic component. With generic elements, there is no semantic component. When we ask "what kind of thing is a div?" There isn't really an answer. It's just a generic container for block content.

Generic Block Element

<div><h1>The Spice Emporium</h1><div>

Generic Inline Elements

<p>See <span>Ganesha</span> in Mumbai

What good are generic elements? Well we can use them, in conjunction with the first attribute we are really taking a look at, to create our own elements, in a way, or at least to extend the logical markup capabilities of HTML.

Think about these examples

With the second and third example, we've used the class attribute to add a semantic aspect to the element.

When we markup some content like this <span>This is a problem</span> the element carries no meaning other than that conveyed by its content. Is the content sarcastic, patronizing, admonishing, warning? We can't really tell. However, <span class="alert">This is a problem</span> conveys a particular meaning over and above the content itself. We know that it is a serious problem.

The class attribute allows us to specify the group or class of elements to which an element belongs. Let's take the example of a recipe, think about the different classes of information we might want to mark up, and then actually do this as part of the web site we're working on.

Snapshot 5: Recipe with basic markup

This kind of task always calls for judgment, and often no two answers are the same, and no one answer is necessarily the right one. Here is my analysis. I've also simplified things a little in my example, because we're actually going to have to implement this in our HTML a little later, so we don't want to make it too complicated for our first go, do we?

If you have read many recipes, you'll know that almost invariably, recipes describe the dish, and specify the number of people the dish is for. So that's two kinds of information, a "description", and a "serves" (as in "serves 4").

Next, we have a list of ingredients.

Next we come to the Method. The method is a block of information.

The last type of information I'd identify is each of the steps in the method. These too are blocks of information. We could call these a "step".

Let's summarize.

Now, what has all this got to do with generic elements? We use the class attribute in conjunction with the generic elements to create our own structural elements. If the content we want to create is block type content (that is, it should appear separated from the preceding and following content) then we want to use a div element. If the content is inline content, we want to use a span element.

Note that for each, we've come up with a one word description. That's because class names must contain letters, numbers and hyphens (-) only. No underscores, no spaces, or other characters at all.

Here we want to take these classes of information, and mark up our recipe into the relevant div and span elements, with the appropriate class attributes for each.

Remember that inline elements get marked up as span elements, while block elements get marked up as div elements. Remember too that the class attribute value must be quoted. Take a look at the code example above to see how to write a div or span element with a class attribute.

As you work, check it out in the browser and you should see the results, because the style sheets we've developed for the site already have rules which apply to each of these classes of element.

This exercise may take a little bit of time, and will test out your understanding of what we have covered in this part of the course. Main points to keep an eye one are

• correct opening and closing of all elements.
• quoting of class attributes
• div elements contain correct contents
• block and inline elements used as appropriate

How did you go? Your HTML should look like this

And in the browser, the page should start to take this shape as you work

Snapshot 6: Recipe with generic elements marked up

Why do we bother with this? What practical benefits do we get? Perhaps the most important benefit is when it comes to styling the page with style sheets. When it comes to the appearance of this page, we will probably want to give a different appearance to various parts of the page. This can very easily be done using a style sheet, once the page is marked up in this way. One style sheet can then be used to give style to possible hundreds of recipes. You'll agree that this is a very good return on what is quite a small investment.

© 1997- western civilisation pty. ltd. Contact Us Search Site