 |
Figure 2.1 shows a simple web page that contains a very brief statistical report on the Poles of Inaccessibility data from Chapter 1. The report consists of paragraphs of text and an image (a plot), with different formatting applied to various parts of the text. The report heading is bold and larger than the other text, and the table of numerical summaries is displayed with a monospace font. Part of the heading and part of the supplementary material at the bottom of the page are italicized and also act as hyperlinks; a mouse click on the underlined text in the heading will navigate to the Wikipedia page on the Poles of Inaccessibility and a click on the underlined text at the bottom of the page will navigate to NASA's Live Access Server home page.
|
The entire web page in Figure 2.1 is described using HTML. The web page consists of a simple text file called inaccessibility.html that contains HTML code. The HTML code is shown in Figure 2.2.
We do not need to worry about the details of this HTML code yet. What is important is to notice that all of this code is just text. Some of it is the text that makes up the content of the report, and other parts are special HTML keywords that “mark up” the content and describe the nature and purpose of each part of the report. The keywords can be distinguished as the text that is surrounded by angled brackets. For example, the heading at the top of the page consists of two keywords, <h3> and </h3> surrounding the actual text of the heading (see lines 7 to 12).
The HTML code is just text, so the overall document is just a text file. We will explore the differences between different sorts of files in more detail in Chapter 5. For now, it is just important to note that HTML code, and any other computer code that we write, should be written using software that creates plain text files. For example, do not write computer code using a word processor, such as Microsoft Word. We will return to this point in Section 2.4.1.
Another feature of the code in Figure 2.2 is that it has a clear structure. For example, for every start tag, there is an end tag; the <head> start tag on line 3 is matched by the </head> closing tag on line 5. This rigid structure is an important feature of computer languages and reflects the fact that there are strict rules to follow for any computer language. It is vital that we observe this structure, but the discipline required will help us to be accurate, clear, and logical in how we think about tasks and in how we communicate our instructions to the computer. As we will see later in this chapter, it is also important that this structure is reflected in the layout of our code (as has been done in Figure 2.2).
In this chapter we will learn the basics of HTML, with a focus on how the code itself is written and with an emphasis on the correct way to write computer code.
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Poles of Inaccessibility</title>
</head>
<body>
<h3>
Temperatures at the Pacific and Eurasian
<a href="http://wikipedia.org/wiki/Pole_of_inaccessibility"
style="font-style: italic">
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"
style="font-style: italic">
Live Access Server</a>.
</p>
</body>
</html>
|
Paul Murrell
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 New Zealand License.