Intro Resources Bib Address NQ
 



 

HTML Primer II


Formatting Text

All text formatting takes place within the BODY tags. With the advent of newer releases of HTML (HTML 3.2, for example) by the World Wide Web Consortium (w3), there are now faster ways of formatting pages called style sheets. But these can get rather complicated. Let's stick to the basics.

You've already seen how to format bold and italics.

    <B></B> will give you bold
    <I></I> will give you italics
    <U></U> will give you underline
    <H1></H1> will give you large

    heading text

    <H2></H2> will give you smaller

    heading text

    <H3></H3> will give you even smaller

    heading text

    and so forth until H6, which is the
    smallest heading
Headings are used because they are automatically set off from the rest of the text block. This means you don't have to fool with line breaks in order to space your text out nicely on the page.

You can also increase and decrease the size of the font you use. This is accomplished with the <FONT></FONT> tags. For example, to format text in standard size font, usually 12 point on a word processing program:

    [Text reads:]<FONT SIZE=3> Jones </FONT>
will produce
    [Browser displays:] Jones
and
    [Text reads:]<FONT SIZE=5> Jones </FONT>
will produce
    [Browser displays:] Jones
There are few hard and fast rules for HTML, and novelty is prized on the web. If you can use these tags to produce interesting effects, do!

You may want to break your line, so it doesn't run to the edge of the screen and wrap around. For that, you use the <BR> tag. Place it where you want a line break. You can also use this to space text. Once you finish with a paragraph, you can put a <BR>, and the browser will skip a line. Note: there is no </BR>. The paragraphs in this document, though, are separated using the handy <P> tag. Simply put this at the beginning of a line or paragraph, and it will be separated from the previous line by a single space. Finally, there is the non-breaking space tag. This is useful for putting space under images. The code there begins with an ampersand and ends with a semicolon: & nbsp; But don't put the space in. (I can't display the code since your browser will interpret it as a space!) You can use an ampersand in your text as long as it has a space on either side of it. Otherwise, a browser may confuse it for a tag.

There are a number of characters you have to keep out of your text. A less-than sign, <, is an & plus lt. A greater-than sign, >, is an & plus gt. If you would like to get a list of these codes, go to your favorite search engine and look up "ISO character set."

If you want to align your text, use the <DIV ALIGN> </DIV> tags. For example, let's say you want your text to be centered on the page. You would tag it: <DIV ALIGN=CENTER> text </DIV>. You can also ALIGN=LEFT and ALIGN=RIGHT. You can use these tags to align one word, a paragraph, or the whole page.
 

Formatting Text Blocks and Images: Tables

Now that you know how to organize a text, it's time to learn how to organize text blocks. What this means is simply that you need to know how to arrange a page so that you have sufficient margins and adequate line width.

The most common way of doing this is to produce a table. A table is an area of the browser's screen that you delimit. Like accounting tables, an HTML table has columns and rows. For those of you (like me) who always had a difficult time keeping these two straight, just remember that Greek columns support ceilings, and that when you row a boat, you row along the horizon. Therefore, a column is the verticle on your screen, a row the horizontal.

A table is created with the <TABLE></TABLE> tags. Most importantly, you can align your table to the left margin, the center, or the right margin. The table which organizes the text on this page is aligned in the center of the page. You can also tell the browser how much of the screen you'd like to use: 100%, 90%, 83%, and so forth. You choose the amount. We'll get to that in a second.

The simple rule of tables is that a table needs a minimum of two elements, or cells. If the browser only sees one cell, it wonders why you want a table at all and defaults to ignoring the table completely. Fortunately, there are tricks to fool a browser!

Let's begin with a simple table of one row and two columns. Let's put it right here:

    Cell OneCell Two

I've made the border of the table red and the background of each cell lime. I can choose any color for any attribute. I can even increase the width of the border or the relative size of each cell. This is how you make a table:

The table is established with <TABLE>. Then you tell the browser you'd like one row: <TR>, which stands for "table row." Now the browser is ready for the first cell. It needs some data, table data or <TD>. So far, you have this:

    <TABLE>
    <TR>
    <TD>
and the browser is ready for the data. You simply put in your data. In the above instance it was "Cell One." It looks like this:
    <TABLE>
    <TR>
    <TD>
    Cell One
Now a second cell, but remember to close the first one before opening a new one. Otherwise the browser thinks you are still in the first cell.
    </TD>
    <TD>
    Cell Two
And we're almost finished. Let's close the tags in the reverse order:
    </TD>
    </TR>
    </TABLE>
And we have a table. But let's see how this table appears:
    Cell OneCell Two
No red, no lime, no borders. Perfect. That's the way to format text so that your reader doesn't see the Wizard behind the curtain. In fact, the page you are reading was formatted with a table. That's how I've been able to keep such a wide margin on the left side. I find a nice, wide margin makes the text more legible, and more pleasant to look at.

So, let's say you want to format your text to appear with a wide margin on each side. You can write this:

    <HTML>
    <HEAD>
    <TITLE>My Page</TITLE>
    </HEAD>
    <BODY>
    <H2>This is my Home Page.</H2>
    <TABLE WIDTH=80%>
    <TR>
    <TD>
    Your text goes here.
    </TD>
    <TD>
    The next part of your text goes here.
    </TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
And we're done. You have a nicely formatted page. One note: if you want to see how a web page has been formatted, you can "View Source" on most browsers. In Netscape, this is under the "View" menu. Simply open "View Source" and the HTML behind the document will be displayed. Web etiquette permits the liberal borrowing of people's HTML. So, if you see a page you like, feel free to view source, and copy-paste the code to your own document. The internet was designed to allow for the sharing of computer code. So, borrowing code and allowing yours to be borrowed is in the best tradition of the internet. Feel free to look at how this page was put together.

To format images, simply create a table and place your image in one of the cells. You need to know the height and width of your image (see next installment, images). This is the code: <IMG SRC="image.gif" BORDER=0 WIDTH=62 HEIGHT=253>. For more, click below.