From GIMP to xHTML and CSS

The very first thing we need to do, before applying any styling, is to create the HTML and adding a meaningful structure to the document. Take a look at the final result [note to self: ADD screenshot]. Our starting point is the Basic Template, which you can find in the course material. Between the title tags, put 'School of Webcraft'. It is always a good idea to give a page a title right away, since if you forget it, it will say something like 'blank page' and your page will look amateuristic.

Let's first take care of the large building blocks we have. You can compare these with toy blocks that you stack on top of each other. Except in html, they will start at the top and 'stack' towards the bottom. We call these blocks 'block level elements'. You can recognize them because, if you put them in the html code, they will start on a new line. Some examples are div, p, form, blockquote.

Aside from block-level elements, you have inline elements. These will try to fit inside the with of their containing element and wrap to a new line if necessary. Also they do not create a line break. Block level elements can contain both block-level elements and inline elements, but inline elements cannot contain block level elements, only data or other inline elements.

This is correct: <div> <p>This is <strong>a <em>simple</em> example</strong> which is correct.</p> </div>

This is wrong: <p> <strong> <div>This is wrong</div></strong>, because div is block-level and strong is inline.</p>

For our major building blocks, we are are going to use div tags. Because we want to be able to style them later, we have to apply either an id attribute or a class attribute to the div tag. Our blocks however, are unique, and the rule is that when a block is uniqe, you use the id attribute.

Our major blocks are:
- header, we will give this an id of 'header'
- navigation bar, we will give this an id of 'nav'
- body text, we will give this an id of 'body'
- footer, we will give this an id of 'footer'

Because we want to wrap everything inside a central column, we need an extra div around those, which we will give an id of 'centralCol'. Please note that CSS is case-sensitive, so centralCol, centralcol and CENTRAlcol are three different values.

Our html code now looks like the following:

<!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" xml:lang="nl">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <title>School of Webcraft</title>
</head>
<body>
   <div id="centralCol">
        <div id="header">Header</div>
        <div id="nav">Navigation</div>
        <div id="body">Body</div>
        <div id="footer">Footer</div>
   </div>
</body>
</html>

Now let's go over those blocks one by one, starting from the top.

1. Header
The header will contain the header image we created. That image also contains some heading text. Since this is not very semantic and since this leads to decreased accessibility (for example, screen reader will not be able to read it, search engines such as Google will not be able to see it, ...), we will put a h1 (heading 1, in other words: the most important heading on the page) with the text, which we will hide later when styling the page.

code: <h1>P2PU: School of Webcraft</h1>

2. Navigation
The navigation is in fact a list of links, so we are going to use an unordered list to style it.

Code:

3. The body text

First, we have the main title with a subtitle, for which we will use an h2 and a h3. This is followed by a paragraph, so a simple p will suffice. Then we have two columns side-by-side, each containing a heading followed by a paragraph. Here we'll use h3 for the title and p for the paragraphs. We will style them later. For now, we just put them one after the other.

4. The footer

For the text inside the footer, once again we'll use a simple p (paragraph).

Our code now becomes:

<!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" xml:lang="nl">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>School of Webcraft</title>
</head>
<body>
    <div id="centralCol">
        <div id="header">
        <h1>P2PU: School of Webcraft</h1>
   </div>
        <div id="nav">
        <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">link 5</a></li>
        </ul>
   </div>
        <div id="body">
        <h2>Main title</h2>
        <h3>A subtitle</h3>

<p>The first paragraph</p>

<h3>Title for the left column</h3>
<p>Paragraph text for the left column.</p>

<h3>Title for the right column</h3>
<p>Paragraph text for the left column.</p>

</div>

        <div id="footer">
        <p>Footer text.</p>
   </div>
    </div>
</body>
</html>

If you take a look at this in a browser, you will see that it looks really basic and boring, since without any CSS the browser applies some basic styling of its own. However, what is important to notice here, is that you CAN recognize a structure. You clearly see what is more important, which titles belong to which paragraphs and in which order you should read things. Imagine this as being a draft for a newspaper article.

Almost done, but we need to do one more thing: make sure there are enough 'hooks' for styling the two side-by-side columns in the #body area. In order to position these later, we need to wrap a div around each of the columns. This way we can 'group' the h3 and p tags and put them inside their own 'column' block . We will also put a div around these two column divs. That's not always necessary, but it is for us, since we want to apply a background image to BOTH the column divs. If that does not make sense at this moment, it will when we get to the styling part.

Our final HTML code. I also included our text in it (notice also the strong tag in the first paragraph):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>School of Webcraft</title>

</head>

<body>

<h1>P2PU: School of Webcraft</h1>

</div>

<ul>

<li><a href="#">About P2PU</a></li>

<li><a href="#">Take a course</a></li>

<li><a href="#">Run a course</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</div>

        <h2>Welcome to the school of Webcraft</h2>
        <h3>Together toward an open web</h3>
        <p><strong>The School of Webcraft is a joint partnership between Mozilla and Peer 2 Peer University dedicated to providing web developer training that’s free, open and globally accessible</strong>. Our peer-led courses are powered by learners, mentors and contributors like you. Our goal: make it easy for people around the world to gain skills and build careers using open web technology. (Learn more about the School of Webcraft’s vision and plan here.)</p>

            <div id="leftCol">
                <h3>What is Peer 2 Peer University?</h3>
                <p>Peer 2 Peer University is an open education project dedicated to “learning for everyone, by everyone, about almost anything.” P2PU offers a platform for lifelong learning and accreditation through online courses and freely available open education materials. Check out the P2PU Frequently Asked Quesions page here.</p>
            </div>

            <div id="rightCol">
            <h3>How can I get involved in the School of Webcraft?</h3>
            <p>Propose a course, take a course, or contribute ideas by joining our community. The School of Webcraft’s weekly community calls are also open to all to attend. You can also make a donation to support the School of Webcraft’s work.</p>
            </div>

</div>

<p>Footer text.</p>

</div>

</body>

</html>

From GIMP to xHTML and CSS

Course Material

Part 2 - creating the HTML and applying structure (DRAFT)