Lab 3
Page 5

Formatting Text

Regular Text and Paragraphs

Most importantly, HTML browsers ignore all "white space". They do not pay attention to how many spaces you've put between two words, or whether those words are on different lines. All consecutive blank lines, empty spaces and returns are condensed into a single space.

One side effect is that you cannot end a paragraph or create a blank line without typing in a special tag. For example, the text in the following example is broken onto many lines with many spaces, but is not displayed that way:

While at first this may seem annoying, it is actually very useful. Thanks to this strange feature, you can use blank lines, tabs, and spaces to make your HTML code look neat without worrying about these lines showing up on your actual page.

Of course there will be many occasions when you actually want blank lines and the following tags may help:

<BR> - This tag creates a line break wherever you place it.

<P> </P> - These two tags should surround every paragraph. They will automatically put in the empty lines to make your text look neat.

Take a look at the following example

Notice how everything seems neater on the right side. If you use paragraph tags properly, all of your text should come out as nicely, even if the HTML file is messy.

It is important to note that there are several symbols which HTML will not display properly. If ever your web page is not displaying correctly, make sure you haven't used any of the following symbols.

There are, of course, other symbols which cause trouble. Still others are not found on the keyboard and so are difficult to include. The strange-looking codes in the rightmost column above are called "escape codes" and are used to represent these difficult characters. There are many pages on the Web with complete lists of these escape codes.

Here is one more common example of an escape code:

Headings

You will often want to include headings in your web pages with larger and bolder text that stands out from the page. For this, we have the <H#> </H#> tags. Simply replace "#" with a number from 1-6 and surround your heading wit h these two tags. The text inside will be bold, usually larger (depending on the number -- H1 is the largest), and surrounded by empty lines.

Here's an example of the different levels of headings:

Always be sure to close your header tag (using the appropriate ending tag) or the rest of your page will be displayed in the larger, bolder text. It is very important that you use an ending tag that matches your opening tag. If you opened with <H2>, you must close with </H2>.

Fancier Text

Now that you know how to display normal text, paragraphs and headings, it's time to get a little bit fancier. Using just a few tags, we can make that text bolder, italicized, underlined, bigger, smaller or even a different color.

Notice how the following tags work:

Of course, the best ways to make something stand out are c o l o r and s i z e!

For this, we use the <font> </font> tags. Inside this tag, you can specify a color, a size, or both in the following way:

The color you use should be one from the table provided on the last page (as background colors for your BODY tag). The size can range from 1-7 with 1 the smallest and 7 being very, very large.

Other Tricks with Text

Bars - In several places on this page, you've probably noticed the horizontal bars stretching across the screen. You can include these bars in your page by simply typing <HR> at each place where you would like one to appear. Like <BR>, <HR> does not require a closing tag since it is an instantaneous effect.

Alignment - There may be times when you would like to center a heading, or right-justify a paragraph. This is easily done by using one of the following two methods:

• The <CENTER> </CENTER> tags - Simply surround whatever you would like to be centered with these two tags.
• The ALIGN attribute - If you want to align a paragraph or heading, simply include the ALIGN attribute in the tag. For example, <P ALIGN=RIGHT> will begin a right-aligned paragraph. Be sure to end such a paragraph using a normal <P> tag, or everything else on your page will be right-aligned as well. The possible alignments are "RIGHT", "LEFT" and "CENTER".

Pre-formatted Text - If you simply cannot find a way to make your text appear correctly, you can always resort to using the <PRE> </PRE> tags. Any text placed between these two tags will appear exactly as you type it, including spaces, indentation and empty lines. Try not to use it very o ften, however, since the text will appear in a fixed-width font, will not flow naturally, and won't wrap at the edge of your window.

What you've done so far

At this point, you should have a web page that looks something like the one below. Don't forget to save your file and load it in Netscape to see what it looks like as often as you like. If you don't understand one of the tags we've used below, or something is wrong with your web page, ask a TA for assistance.

If your page looks similar and you understand everything so far, go on to learn about lists, images, links, and sound.