Servage Web Development Course Part 2: Content formatting

In this part you will learn how to format (style) web pages’ main content, such as text, paragraphs, lists, images and links. The formatting will be done with CSS, which was introduced in the first part of the Servage Web Development Course.

Just to recap: HTML (Hypertext Markup Language) is the language used for the content of your website. CSS (Cascaded Style Sheet) is the language used to describe the design of your content. It is important to remember that we strictly separate those two elements from each other. One of the main advantages of this, is that you can not only have different people working on content and design separately from each other, you can also completely switch layouts without having to change the content (by applying a new CSS file to the same HTML content). These advantages may seem a little abstract at the moment, so please just remember: No design stuff in the HTML file ;-)

Example of an HTML page with content

In the following code (part2.html) you will see a few new HTML tags compared to the first part of the course. First of all, we have added a so called Doctype declaration in the top of the HTML document. This is a technical instruction that states which version of the HTML language we are working with. In this case, we use XHTML 1.0 Strict. But don’t worry to much about this for now ;-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Test Page</title>
    <link rel="stylesheet" type="text/css" href="part2.css">
  </head>
  <body>
    <div class="article">
      <h1>Genome analysis changes diagnosis</h1>
      <p class="date">Saturday, 24 October 2009 01:21 GMT</p>
      <p class="description">
        A critically ill Turkish boy has had his life saved after scientists were
        able to read his genome quickly and work out that he had a wrong diagnosis.
      </p>
      <img src="part2.jpg" alt="Illustration of DNA" />
      <p>
        The scientists writing in the journal, Proceedings of the National Academy of Sciences,
        say they completed the analysis of his blood in just 10 days. They were able to see that
        he had a mutation on a gene that coded for a gut disease and tell his doctors. Clinical
        tests proved that the boy had the disease and he is now recovering.
      </p>
      <p>
        <strong>Simultaneous analysis</strong><br />
        Richard Lifton, of Yale University Medical School who co-ordinated the research with teams
        in Beirut and Turkey, said: "The boys physicians sent a blood sample - they only had a very
        broad diagnosis of what was happening to this five-month-old child and were suspicious that
        he had a genetic disorder affecting his kidneys. [...]
      </p>
      <p>
        <a href="http://www.bbc.co.uk/go/homepage/i/int/news/worldtop/5/-/news/1/hi/health/8315258.stm">Read the full article here.</a>
      </p>
    </div>
    <div class="other_articles">
      <h2>Other articles</h2>
      <ul>
        <li><a href="http://news.bbc.co.uk/2/hi/uk_news/england/cornwall/8323061.stm">Farmer gets two-in-one ducklings</a></li>
        <li><a href="http://news.bbc.co.uk/2/hi/uk_news/england/cornwall/8323765.stm">Five rescued after boat capsizes</a></li>
        <li><a href="http://news.bbc.co.uk/2/hi/europe/8323651.stm">German coalition agrees tax cut</a></li>
      </ul>
    </div>
  </body>
</html>

The significant HTML tags used for content in this part are…

<div> A “container” tag that is used for logical grouping of other tags. Think of it like a “box” in which you put related things. In our example we have collected all tags related to an article within a <div> container. In another <div> container we have included links to other articles.

<h1> means “Heading 1″, and is used for the biggest title on the page. Subsequent headings are then called <h2>, <h3> and so on, to denote their relative position in comparison to other headings. So you could for example have <h1>Chapter 1</h1>, <h2>Chapter 1, Part1</h2>, <h3> Chapter 1, Part 1, Subpart 1</h3>, <h1>Chapter 2</h1> and so on…

<p> is a paragraph (of text).

<img> is an image.

<a> is a link. In our example we use a text link, but it could also enclose an <img> tag, so the image would be the link.

<ul> Is a unordered list, with multiple <li> tags (list items).

Please note that we have assigned the “class” attribute to some of the tags, in order to distinguish them from other tags of the same kind. For example we have multiple <p> tags, so we have given them different classes (“date”, “description”). You are free to make up classes, and it is strongly recommended to make use of them, because it helps make the document structure more transparent, and is necessary for CSS-based-layout instructions.

There are many more HTML tags, and we will go through more during the next parts of the Servage Web Development Course. However, if you really want to get going or a little impatient, you can see here for a full list: http://www.w3schools.com/tags/default.asp

CSS styles

Create a part2.css file with the following content:

body {
  font-family: Arial, Verdana;
  font-size: 12px;
}
.article, .other_articles {
  width: 400px;
  border: 1px solid #cccccc;
  padding: 10px;
  margin: 10px;
}
h1 {
  font-size: 20px;
  margin: 0;
}
h2 {
  font-size: 16px;
  margin: 0;
}
p.date {
  font-size: 10px;
  color: #aaaaaa;
}
p.description {
  font-weight: bold;
}
.article img {
  float: right;
}
a {
  color: #990000;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
ul {
  list-style-type: square;
}

In this stylesheet we have added quite a few design instructions. There are a whole lot of possible instructions. You can find a comprehensive CSS reference here: http://www.w3schools.com/css/css_reference.asp

Please note how we can target different “classes” by using a dot (.). This way we can give different instructions to for example <p class=”date”> and <p class”description”>.

I encourage you to play around with the HTML and CSS code, and use the above references for further tags and CSS styles you can apply.

You can download the files for this part of the course here.

In the next part of the Servage Web Development course we will go into further HTML tags and introduce more layout-oriented techniques, so we can create a website with a top (header), columns (menu and content) and a bottom (footer). Stay tuned :-)

Servage Magazine