This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 New Zealand License.
One of the purposes of this book is to introduce and explain various technologies for working with data. We have already met one such technology, HTML, for producing reports on the world wide web.
Another purpose of this book is to promote the correct approach, or “best practice”, for using these technologies. An example of this is the emphasis on writing code using computer languages rather than learning to use dialog boxes and menus in a software application.
In this section, we will look at another example of best practice, called the DRY principle,2.6 which has important implications for how we manage the code that we write.
DRY stands for Don't Repeat Yourself and the principle is that there should only ever be one copy of any important piece of information.
The reason for this principle is that one copy is much easier to maintain than multiple copies; if the information needs to be changed, there is only one place to change it. In this way the principle promotes efficiency. Furthermore, if we lapse and allow several copies of a piece of information, then it is possible for the copies to diverge or for one copy to get out of date. From this perspective, having only one copy improves our accuracy.
To understand the DRY principle, consider what happens when we move to a new address. One of the many inconveniences of changing addresses involves letting everyone know our new address. We have to alert schools, banks, insurance companies, doctors, friends, etc. The DRY principle suggests that we should have only one copy of our address stored somewhere (e.g., at the post office) and everyone else should refer to that address. That way, if we change addresses, we only have to tell the post office the new address and everyone will see the change. In the current situation, where there are multiple copies of our address, it is easy for us to forget to update one of the copies when we change address. For example, we might forget to tell the bank, so all our bank correspondence will be sent to the wrong address!
The DRY principle will be very important when we discuss the storage of data (Chapter 5), but it can also be applied to computer code that we write. In the next section, we will look at one example of applying the DRY principle to writing computer code.
Cascading Style Sheets (CSS) is a language that is used to describe how to display information. It is commonly used with HTML to control the appearance of a web page. In fact, the preferred way to produce a web page is to use HTML to indicate the structure of the information and CSS to specify the appearance.
We will give a brief introduction to CSS and then go on to show how the proper use of CSS demonstrates the DRY principle.
We have actually seen two examples of CSS already in the HTML code from the very start of this chapter. The CSS code occurs on lines 10 and 41 of Figure 2.2; these lines, plus their surrounding context, are reproduced below.
<a href="http://wikipedia.org/wiki/Pole_of_inaccessibility" style="font-style: italic"> Poles of Inaccessibility</a>
<a href="http://mynasadata.larc.nasa.gov/LASintro.html" style="font-style: italic"> Live Access Server</a>.
In both cases, the CSS code occurs within the start tag of an HTML anchor (a) element. The anchor element has an attribute called style, and the value of that attribute is a CSS property.
font-style: italic
This property has the name font-style and the value italic; the effect in both cases is to make the text of the hyperlink italic.
One component of the CSS language is this idea of properties. The appearance of an element is specified by setting one or more CSS properties for that element. There are a number of different properties to control things like the font used for text, colors, and borders and shading.
One way to use CSS is to add CSS properties as attributes of individual HTML elements, as in the above example. However, this has the disadvantage of requiring us to add a CSS property to every HTML element that we want to control the appearance of.
Figure 2.8 shows another way to use CSS properties; this is a small modification of the HTML code from Figure 2.2. The result in a web browser is exactly the same; all that has changed is how the CSS code is provided.
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Poles of Inaccessibility</title>
<style type="text/css">
a { font-style: italic; }
</style>
</head>
<body>
<h3>
Temperatures at the Pacific and Eurasian
<a href="http://wikipedia.org/wiki/Pole_of_inaccessibility">
Poles of Inaccessibility</a>
</h3>
<hr>
<p>
The Eurasion Pole of Inaccessibility experiences a much
wider range of temperatures than the Pacific Pole of
Inaccessibility.
</p>
<pre>
pacific eurasian
min 276 252
max 283 307
</pre>
<p>
This reflects the fact that large bodies of water tend to
absorb and release heat more slowly compared to large
land masses.
Temperatures also depend on the time of the year and which
hemisphere the pole is located in.
</p>
<img src="poleplot.png">
<hr>
<p>
Source: NASA's
<a href="http://mynasadata.larc.nasa.gov/LASintro.html">
Live Access Server</a>.
</p>
</body>
</html>
|
The important differences in Figure 2.8 are that there is a style element in the head of the HTML code (lines 5 to 7) and the anchor elements (lines 12 and 13) no longer have a style attribute.
The new style element in the head of the HTML code is reproduced below.
<style type="text/css">
a { font-style: italic; }
</style>
One important point is that this CSS code no longer just consists of a CSS property. This CSS code is a complete CSS rule, which consists of a selector, plus one or more properties.
The components of this CSS rule are shown below.
| selector: | a { font-style: italic; } |
| open bracket: | a { font-style: italic; } |
| property name: | a { font-style: italic; } |
| colon: | a { font-style : italic; } |
| property value: | a { font-style: italic; } |
| semi-colon: | a { font-style: italic ; } |
| close bracket: | a { font-style: italic; } |
The brackets, the colon, and the semi-colon will be the same for any CSS rule.
The selector part of the CSS rule specifies the elements within the HTML document that the properties part of the rule is applied to.
In this case, the selector is just a, which means that this rule applies to all anchor elements within the HTML document.
This is one demonstration of how CSS supports the DRY principle. Instead of adding CSS code in a style attribute to every element within an HTML document, we can just add CSS code to a single style element at the top of the HTML document and the rules within that CSS code will be applied to all relevant elements within the document.
This is good, but we can do even better.
A third way to use CSS code is to create a separate text file containing just the CSS code and refer to that file from the HTML document.
Figure 2.9 shows a modification of the code in Figure 2.8 that makes use of this approach.
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Poles of Inaccessibility</title>
<link rel="stylesheet" href="reportstyle.css"
type="text/css">
</head>
<body>
<h3>
Temperatures at the Pacific and Eurasian
<a href="http://wikipedia.org/wiki/Pole_of_inaccessibility">
Poles of Inaccessibility</a>
</h3>
<hr>
<p>
The Eurasion Pole of Inaccessibility experiences a much
wider range of temperatures than the Pacific Pole of
Inaccessibility.
</p>
<pre>
pacific eurasian
min 276 252
max 283 307
</pre>
<p>
This reflects the fact that large bodies of water tend to
absorb and release heat more slowly compared to large
land masses.
Temperatures also depend on the time of the year and which
hemisphere the pole is located in.
</p>
<img src="poleplot.png">
<hr>
<p>
Source: NASA's
<a href="http://mynasadata.larc.nasa.gov/LASintro.html">
Live Access Server</a>.
</p>
</body>
</html>
|
The important difference this time is that there is a link element in the head element (lines 5 and 6) rather than a style element. This new link element is reproduced below. Most of this element is standard for referencing a file of CSS code; the only piece that is specific to this example is the href attribute, which specifies the name of the file that contains the CSS code.
<link rel="stylesheet" href="reportstyle.css"
type="text/css">
This link element tells a web browser to load the CSS code from the file reportstyle.css and apply the rules in that file. The contents of that file are shown in Figure 2.10.
|
a {
font-style: italic;
}
|
A CSS file can contain one or more CSS rules. In this case, there is just one rule, which applies to anchor elements and says that the text for hyperlinks should be italic.
The advantage of having a separate file of CSS code like this is that now we can apply the CSS rule not just to all anchor elements in the HTML document inaccessibility.html, but to all anchor elements in any other HTML document as well. For example, if we want this style for all statistical reports that we write, then we can simply include a link element that refers to reportstyle.css in the HTML document for each report. This is a further example of the DRY principle as it applies to computer code; we have one copy of code that can be reused in many different places.
As mentioned previously, there are many other CSS properties for controlling other aspects of the appearance of elements within a web page. Some of these are described in Chapter 4.
Chapter 4 also describes some more advanced ideas about the selectors within CSS rules. For example, there are ways to specify a selector so that a CSS rule only applies to some anchor elements within an HTML document, rather than all anchor elements within the document.
Cascading style sheets control the appearance of HTML documents.
By having separate HTML and CSS files, it is easy and efficient to have several different HTML documents with the same general appearance.
Paul Murrell
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 New Zealand License.