Web Pages, Part II

In this lesson, we will add several more basic tags. To edit your page further, you need to get into your wam account again, and get into the correct directory. As before, type

cd ../pub

To see a list of the files in this directory, type

ls | more

and hit RETURN. The "ls" portion tells the host computer to list the files in the directory. The "| more" portion tells the host computer to pause when the screen is full so that your filenames won't go whizzing by too quickly to read. At this stage, you can leave off the "| more" poretion. Your directory almost certainly has only a handful of files. But as you add images, additional pages and such, the "| more" command will become a necessity.

If nothing has gone astray, you should see your web page file listed in the directory. To edit it, type

pico index.html

and hit return. This will open your file with the PICO editor. (If you called the file something else, use the correct name.) If you did what part one told you to do, you have some code that looks more or less like this:

<html> <head><title>My Web Page</title></title> <body bgcolor=#ffffff> <center>My Web Page</center> <p>This is my first paragraph in my very first web page. It is a short paragraph but it isn't very long. <p>And this is my second paragraph. It's even shorter.

Now we're going to learn to add some extras.

Dividing Lines

You just saw one. These are easy to make. At the end of the text, just before you want the divider, use the tag

<hr>

(Think of "hr" as standing for "hard return" if that helps.) Thus, the text

This is the end of this section<p><hr>

gives the result

This is the end of this section

Font Size One useful thing to know is how to change type size, for titles, fine print and such. The tag you use is the <font> tag. The attribute or modifier is "size=" and the value is the type size. If you type

<font size=+1>This is one size bigger</font>

you will get a display that looks like this:

This is one size bigger

Note that there are no spaces in "size=+1". Note also that to close the tag, I only need to write </font>. I don't need to include the modifier "size" in the closing tag. This is true in general. Modifiers are not needed in closing tags.

Try changing the size of your displayed title. What I mean is the title that will show up onscreen -- the one between the opening and closing "center" tags. I am not referring to the text between the "<title> and </title>" tags.

A caution: make sure that you don't "cross" tags. You may write

 <center><font size=+1>My Web Page</font></center>

because the "font" tags are inside the "center" tags. You could also put the "center" tags inside the font tags. What you can't do is write a sequence such as


<center><font size=+1>My Web Page</center></font>

since your browser will get confused about when to stop doing what.

Experiment with different sizes -- +2, -1, -2, etc. There is a limited range of possibilities. +17, for example, is not defined.

The Bold and the Underlined (not to mention the Italic) It is also very useful to know how to make bold-faced, underlined and italic text. All of these are easy, though some browsers (early versions of Netscape, for example) don't read underlining properly. Try typing the following lines:


<b>This is bold</b><p>

<i>This is italic</i><p>

<u>This is underlined</u><p>

The result should be

This is bold

This is italic

This is underlined

And try combining two different sorts of emphasis. The result is not quite as certain; it may depend on your browser.

Anchors Aweigh One of the most important types of tags is the anchor tag. Anchor tags are used to make links, and links are what the web is all about. Here's how to make a link to yahoo.com, the internet search engine:


<a href="http://www.yahoo.com">Yahoo</a>

Let's look at this carefully. The <a begins the anchor tag -- the link. The modifier is href, which means "hypertext reference." The "equals" sign introduces the web address. And notice: the web address must be in quotes. Then, after you insert the closing angle bracket, you put the text that you want your reader to see. It can be anything. It can even be a picture. (We'll get to that later.) Finally you close the anchor with the tag </a>. The result is:

Yahoo

For this link, you wrote the whole shebang, starting with "http://...". This is because the address you are linking to is not in your own public directory. But suppose you had another file in your pub directly, called, for instance, "page2.html." Then your anchor link to that page would be simpler. It would simply read


<a href="page2.html">Another Page</a>

You can try this by making another page in your directory if you like. At the prompt (once you have saved your work on the index.html page) just type

pico page2.html

(or substitute a different name for the page) and hit RETURN. Then simply add an opening "<html>" tag and a little bit of text. That will suffice for purposes of learning to make internal links. In real life, "page2.html" would have more content and more formatting.

Another important use of anchor tags is to make mail links. When you click on a mail link, your browser (assuming it's properly configured) will put you into an email window and let you send a message to the person whose address is linked. For example, if you write

<a href="mailto:stairs@glue.umd.edu">Allen Stairs<a/>

the result will be

Allen Stairs

and clicking on the text would let you send me an email message, assuming your browser is properly configured.

Notice: once again, the bit after href is in quotes. It begins mailto:, and the ":" is necessary. The address here need not be yours. You can put any valid internet address you like after mailto:, assuming, of course, that the person whose address it is doesn't mind. Then finish the tag, remembering to close the quotes, and put the text you want the person viewing the page to see -- usually either a name or the address itself. Then close the anchor tag -- i.e., write </a> -- and you have a mail link.

You now know how to

Make divider
Make a header for your web page.
Center text
Start a new paragraph
Change the background color to white
Change text size
Change text formatting (e.g., to bold)
Make a link to another web page

But you don't know how to make a lists with bullets, like the one above. The list above as an unordered list, meaning it isn't numbered. To make a list like this, we enclose the list items in the tags


<ul> and </ul>

These begin and end the list. But how does the broswer know when one item ends and another begins? For that, we use the "list item" tag

<li>

The following bit of code


<ul>
<li>Apples
<li>Peaches
<li>Pears
<li>Grapes
</ul>

will create the display

Apples
Peaches
Pears
Grapes

If you want the list items numbered, you want an ordered list, and the tags that enclose it are

<ol> and </ol>

. So if we re-write the above as


<ol>
<li>Apples
<li>Peaches
<li>Pears
<li>Grapes
</ol>

the result is

Apples
Peaches
Pears
Grapes

Making
a Break

Another useful thing to know is how to make a line break that doesn't leave a space between lines. The tag is

<br>

and the effect is illustrated by typing


There once was a fellow named Morris<br>
Who lived by a tree in the forest.<br>
He'd occasionally dine<br>
On raw porcupine<br>
Which left poor old Morris quite porous<p>

which should show up in your browser as

There once was a fellow named Morris
Who lived by a tree in the forest.
He'd occasionally dine
On raw porcupine
Which left poor old Morris quite porous.

a poem, if you can call it that, which would look odd if it were double-spaced.

RAINBOW Effects One more piece to this lesson: a bit on color.

First, some technical trivia. To specify a color in HTML, we specify how much red, green and blue it contains. To do this, we use hex numbers. Hex numbers are in base 16. That means that "a" is 10, "b" is 11, "c" is 12, "d" 13, "e" 14 and "f" 15. To write 16, we write "10." If that seems confusing, don't worry. A grasp of the fine points of arithmetic in base 16 isn't needed here. What you need to know is that the highest value for each basic color (red, green or blue) is ff, which is (15x16)+15 = 255, and the lowest is 00. The color code

8899aa,

for example, gives a value of 88 = (8x16)+8 = 136 for red, 99 = (9x16)+11 = 153 for green, and aa = (10x16)+10 = 170 for blue. The first two digits specify the numeric value for red, the second two green, and the third two blue. This color, then will be bluer than green, and greener than red.

Huh?

Type

<font color=#8899aa size=+3>Silvery Blue</font>

The overall effect, in this case, is

Silvery Blue

(We made the text bigger to make it easier to see the color.)

To get a pure blue, for example, you would use the code 0000ff:

Blue Blue

A darker blue would be, for example, 000088.

Night Blue

And so on.

The colored word "RAINBOW" that opened this section, by the way, is given by the following messy-looking code:


<font size=+2>
<font color=#dd0000>R</font>
<font color=#dd8800O>A</font>
<font color=#dddd00>I</font>
<font color=#00dd00>N</font>
<font color=#0055dd>B</font>
<font color=#8800dd>O</font>
<font color=#dd00dd>W</font>
</font>

This shows you some codes for a range of colors. By experimenting, you can create variations on these. And notice: as advertised earlier, HTML ignores line breaks.

How can you use colors?

You can use them to change text color. If you want all the text in a page (or all except what you deliberately change) to be a certain color, say, blue, then you add a modifier to the "body" tag. The tag might read, for example,


<body bgcolor=#ffffff text=#0000ff>

To modify a particular bit of text within the body of your document, surround it with "font" tags, modified with the modifier "color=#______", where the blank gets filled in as a color code. For example,


<font color=#00ff00>This is green</font>

will be rendered as

This is green

Finally, as you have already seen, you can change the background color. One popular choice, seems to be black, which has the code 000000. If you chose black (and I don't really recommend it for most purposes) you must be sure to change the text color. Otherwise, the print will be invisible.

Remember: when you use hex numbers to create color effects, you need to precede the number with the "#" mark.

There is a very useful web page at

http://www.bbsinc.com/bbs-cgi-bin/colorEditor.cgi

It provides a list of color names. If you select one and click on the appropriate button, it will show you the color and the code to produce it. To find the code, look above the table and you will see a little bit of text that reads, for example,

This is the HTML code of your color selection:

          <body bgcolor=#feedd6>

The number code (in this case, "#feedd6" for "AntiqueWhite1") is the same whether you are using the color as background, for text, or for some other purpose.

You now have a great many tools at your disposal. Pictures will come in the next lesson. As an exercise, choose several of the effects described above and put them into your web page.