Last week's lesson focused on creating a file that could be displayed by a browser as something that makes sense to a human reader. This week, we will learn how to organize a document, to display special characters, and to link to other pages on the web.
So far we have used and referred to HTML tags without saying much of what they are. Tags are commands to HTML enclosed by “<>” brackets. So far you have encountered these enclosing the title of HTML documents (<title></title>), specifying the header (<head></head>) and body (<body></body>) of your document, and defining paragraphs (<p></p>). Tags do not print as text. Instead, they tell a web browser how to organize and format the text it does display.
We will use tags extensively in making HTML files.
Sometimes you will want to structure a document by dividing it into sections. Sometimes you will want to present items in list format. Both of these are easy to do in HTML.
Sections of your document are denoted by headings. Sections can be further divided into sub-sections, which can be further divided, and so on. HTML recognizes at least eight levels of headings, with 1 being the highest and 8 the least.
To begin a new secion, give it a title, such as “How I Became King.” Enclose it within heading start and stop tags corresponding to the level of the section. For example, for level 1, type
“<h1>Level 1 Heading: How I Became King</h1>.”
This will display as:
For level 2,
“<h2>Level 2 Heading: How I Became King</h2>”
displays as:
and so on.
Note that the numbers in the <h> and </h> tags denote the level of the heading, not its sequence. Do not just number all your headings in sequence <h1>, <h2>, <h3>, etc. The structure should make sense.
Sometimes you will want to make lists. You may want a list that is unordered, in which the items are not assigned priorities. For example:
Things meerkats like to eat:
Or, you may want a list that is ordered, in which the items have a specific sequence or they must be uniquely identified. For example:
To enter a room whose door is closed:
A list in HTML comprises opening and closing list tags that specify what type of list it is, and the items that make up the list. The opening and closing tags for an unordered list are <ul></ul>, and the opening and closing tags for an ordered list are <ol></ol>. The individual items in both types of list are bracketed by opening <li> and (optional) closing </li> tags. For instance, the unordered list above was coded as:
<ul>
<li>scorpions</li>
<li>spiders</li>
<li>lizards</li>
<li>beetles</li>
</ul>
The ordered list was coded as:
<ol>
<li>Open the door.</li>
<li>Walk through the doorway.</li>
<li>Close the door behind you.</li>
</ol>
Notice that you do not need to supply the numbers for the ordered list. Your browser puts them in automatically. This saves you from needing to re-number the items if you change the list.
The closing </li> tag for list items is optional. I tend to use them just on principle, but it is not necessary.
Sometimes it is useful to begin a new line without starting a new paragraph. This can be accomplished by the <br> tag. For instance,
My good blade carves the casques of men,
My tough lance thrusteth sure,
My strength is as the strength of ten,
Because my heart is pure.
—Tennyson, Sir Gallahad.
was typeset as:
<blockquote>My good blade carves the casques of men,<br>
My tough lance thrusteth sure,<br>
My strength is as the strength of ten,<br>
Because my heart is pure.</blockquote>
Notice that this used the <blockquote> and </blockquote> tags (instead of the <p> and </p> tags) to begin and end the quotation; this is another formatting command available in HTML.
The <br> tag has other uses in HTML, particularly to make sure that all elements following an aligned element are below it instead of next to it. This should not concern us at our level. Besides, web style gurus discourage such use.
Web browsers interpret white space (the character made by hitting the space bar) in a curious way. A single white space displays as a single white space; so far, so good. however, any additional white spaces are ignored. So, two, three, five, or a hundred white spaces are displayed merely as a single space. This can be good for prettying-up your HTML source code, but not so good if you want to display substantial space in your web page.
The way around this is to use the non-breaking space entity (see below). Multiple appearances of this character are displayed faithfully. Also, browsers will not break a line of text at this character.
Carriage returns (the character created by hitting the “enter” key) are not displayed by web browsers as carriage returns, line breaks, or new-paragraph marks. Instead, they are treated as white spaces. As such, any number of carriage returns in a row are treated as a single white space. So, if you want to begin text on a new line within the same paragraph, use the <br> tag, not the carriage return character. If you want to begin a new paragraph, close the current paragraph with a </p> tag and begin a new one with <p>: a carriage return character will do nothing for you. The only use for a carriage return character within an HTML file is to organize the source code into something that can be viewed easily by a human. This is an important function, but it does not carry over into formatting displayed by a web browser.
HTML documents can be created by primitive text editors that do not display special fonts or characters beyond standard letters, numbers, and punctuation. In addition, some characters, such as “<” are reserved for HTML commands; to actually display them, your browser must be explicitly told to display the character rather than try to interpret a command.
HTML commands that print specific characters are called entities. They all begin with an “&” character and end with a semicolon. Some common entities are:
| description | code | displays as |
|---|---|---|
| non-breaking space | | |
| less than sign | < | < |
| greater than sign | > | > |
| ampersand | & | & |
| left single quote | ‘ | ‘ |
| right single quote | ’ | ’ |
| left double quote | “ | “ |
| right double quote | ” | ” |
| right arrow | → | → |
| horizontal ellipsis | … | … |
| en dash | – | – |
| em dash | — | — |
| multiplication sign | × | × |
| minus sign | − | − |
You can easily find more complete lists on the web. One that I like, from the Web Design Group, is their entities page.
Subscripts and superscripts are enclosed within <sub></sub> and <sup></sup> bracketing tag pairs, respectively. For example, to code
H2O → H+ + OH−,
type
H<sub>2</sub>O → H<sup>+</sup> + OH<sup>−</sup>.
At last, the “hypertext” part of HTML! One of the most prominent features of web pages is that they contain links to other web pages. Clicking on a link directs your browser to another web page; the browser then displays the new page.
To make a link, use the <a></a> tags. The format is as follows:
<a href="URL">linktext</a>,
where URL is the address of the page to which the link directs, and linktext is the text displayed in the link. For example, the link UW Physics home directs your browser to the home page of the UW physics department, which is located at http://faraday.uwyo.edu/. The link is coded as
<a href="http://faraday.uwyo.edu/">UW Physics home</a>.
Cool, huh?
Sometimes you will want to include notes to yourself that don’t display in the file. This is accomplished by enclosing your comment text within a comment tag. Comment tags begin with “<!--” and end with “-->”. So,
<!-- This is a stray comment. -->,
placed in an HTML file, will do absolutely nothing. Your browser simply ignores it. But it will be there when you look at the HTML code.
Copyright © 2008, Richard Barrans
Revised: 9 October 2009. Maintained by Richard Barrans.
URL: http://www.barransclass.com/phys1090/labor/circus/htmlsn/tags.html