This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 New Zealand License.
When we write code in a computer language, we call the meaning of the code--what the computer will do when the code is run--the semantics of the code. Computer code has no defined semantics until it has a correct syntax, so we should always check that our code is free of errors before worrying about whether it does what we want.
Computer languages tend to be very precise, so as long as we get the syntax right, there should be a clear meaning for the code. This is important because it means that we can expect our code to produce the same result on different computers and even with different software.
In HTML, tags are used to mark up and identify different parts of a document. When the HTML is viewed in a web browser, different parts of the document are displayed in different ways. For example, headings are typically drawn larger and bolder than normal text and paragraphs are typeset so that the text fills the space available, but with visual gaps from one paragraph to the next.
The HTML 4.01 specification defines a fixed set of valid HTML elements and describes the meaning of each of those elements in terms of how they should be used to create a web page.
In this section, we will use the simple HTML page shown at the start of this chapter to demonstrate some of the basic HTML elements. Chapter 3 provides a larger list.
Figure 2.1 shows what the web page looks like and 2.2 shows the underlying HTML code.
The main part of the HTML code in Figure 2.2 is contained within the body element (lines 6 to 44). This is the content of the web page--the information that will be displayed by the web browser.
In brief, this web page consists of: an h3 element to produce a heading; several p elements that produce paragraphs of text; two hr elements that produce horizontal lines; an img element that generates the plot; and a pre element that produces the table of numerical summaries.
The first element we encounter within the body is an h3 element (lines 7 to 12). The contents of this element provide a title for the page, which is indicated by drawing the relevant text bigger and bolder than normal text. There are several such heading elements in HTML, from h1 to h6, where the number indicates the heading “level”, with 1 being the top level (biggest and boldest) and 6 the lowermost level. Note that this element does two things: it describes the structure of the information in the web page and it controls the appearance for the information--how the text should be displayed. The structure of the document is what we should focus on; we will discuss the appearance of the web page in more depth in Section 2.7.1.
The next element in our code is an hr (horizontal rule) element (line 14). This produces a horizontal line across the page, just below the heading.
Next is a p (paragraph) element (lines 15 to 19). The p tags indicate that the contents should be arranged as a paragraph of text. The important thing to notice about this element is that the web browser decides where to break the lines of text; the line breaks and whitespace within the HTML code are ignored.
The next element in our code is a pre (preformatted text) element (lines 21 to 25). This element is used to display text exactly as it is entered, using a monospace font, with all spaces faithfully reproduced. This is in contrast to the previous p element, where the layout of the text in the HTML code bore no relation to the layout within the web page.
The next element is another paragraph of text (lines 27 to 33), and then we have an img (image) element (line 35). One difference with this element is that it has an attribute. The src attribute specifies the location of the file for the image.
At the bottom of the page we have another hr element (line 37), followed by a final paragraph (p element) of text (lines 38 to 43).
Part of the text in the final paragraph is also a hyperlink. The a (anchor) element around the text “Live Access Server” (lines 9 and 11) means that this text is highlighted and underlined. The href attribute specifies that when the text is clicked, the browser will navigate to the home page of NASA's Live Access Server.
These are some of the simple HTML elements that can be used to create web pages. Learning the meaning of these HTML keywords allows us to produce HTML code that is not only correct, but also produces the web page that we want.
There are many more HTML elements that can be used to create a variety of different effects and Chapter 3 describes a few more of these.
A web page is described by placing HTML tags around the content of the page.
Paul Murrell
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 New Zealand License.