Chapter 2: Text Formatting & Page Layout

To display the web page in a way that you desire, you need to know how to format texts and specify layouts. Text formatting includes font types, sizes, colors, centering texts, etc. It applies only to the sections that you specify. Page layouts, however, apply to the entire page; some examples are margin size and background color.

New Paragraphs and Line Breaks

As mentioned in the very first example, HTML does not recognize the returns that you type in the editor. To start a new paragraph, you must type in the <P> tag.

1. Type <P.
2. You can align the text in the paragraph by typing ALIGN= direction, where direction is left, right, or center.
3. Type >.
4. Type the content of the paragraph.
5. End the paragraph with </P>, but this is optional.

The <P> tag spaces out the paragraphs. If you don’t want the space, you can use the <BR> to break a line, and avoid the extra lines. There is no closing BR tag.

 


Figure 2.1: Starting a new paragraph by P tag; Creating line breaks by BR tag.


Figure 2.2: The source code for Figure 2.1.

Changing the Font, Size, and Color

You can specify the fonts that you’d prefer the viewer to see. If the viewer does not have the font that you specified, the default font is used instead.

1. Type <FONT FACE = "fontname1, fontname2, …"> before the text you wish to change. Fontname2 and other fonts you add after fontname1 is used if the user does not have that font in the system.
2. Type the text that will be shown in the given font.
3. End with </FONT>.

*Terminology: FONT is called a HTML tag, while FACE is one of the attributes of the tag. "Fontname1", etc are the values that are assigned to the attribute.

To change the font size, you can add the SIZE attribute to the FONT tag. Font size 3 is the default.
To change the font color, you can specify the COLOR attribute by:

-one of the sixteen predefined colors: red, green, blue, navy, purple, yellow, etc.
-RGB (red,green,blue) value in hex: #000000 (black), #FFFFFF (white), #00A5C6, etc.

For a list of web safe color palette in hex, please visit:

http://www.cookwood.com/html4_4e/examples/appendices/colorcharthex.html

 


Figure 2.3: Here is an example of different font type/size/color.


Figure 2.4: A portion of the source code for Figure 2.3.

Changing the Default Font, Size, and Color

You can specify the default font, size, and color with BASEFONT tag. This is just like the FONT tag, except that it applies to the entire page.

1. Type <BASEFONT.
2. Type FACE = "fontname1, fontname2, …" for the font type.
3. Type SIZE= "x" where x is a number from 1 to 7. 3 displays the default size that the viewer specified in the browser.
4. Type COLOR= "hexnumber or colorname">.

The default color for text can also be changed by the following way:

1. Inside the BODY tag, type TEXT.
2. Type = "hexnumber or colorname">.

Example: <BODY TEXT = "#222222">

 


Figure 2.5: The first and third lines show the effect of specifying default font.


Figure 2.6: The BODY section of the source code for figure 2.5.

Headers

You can also use <Hx> tags, where x is a number from 1 to 6. They automatically format the text in a decreasing size, so it is a convenient way to insert titles, subtitles, or emphasis without all the hassles of the FONT tag.


Figure 2.7 (left) shows how to use <H> tags. Notice that a new paragraph is automatically started. The source code shown in Figure 2.8 (right).

Exercise 3: Adding more texts to your web page

**continue from exercise 2 in chapter 1.

  1. Above the "Hello, World!" text, write a welcome sign using <H1> tag.
  2. Change the default font color to ‘navy’.
  3. Write a short paragraph about yourself above the ‘University of Rochester’ link. This paragraph should be one size larger than the default size.
  4. Below this paragraph, write a quote in a new line, using the BR tag. The quote should be in the default font size, but in a different font type and color.

Your web page should look something like this:


Figure 2.9: Your home page should look something like this after Exercise 1-3. 

Other Text Formatting

Here is a list of miscellaneous tags you can use to format the text. All of them follow the general form of <TAG>text</TAG>.

You can combine any of the tags to give the text the look you want.

 

Margins, Alignments, Indents

Margins

**Internet Explorer (IE) Only**

To control the space on the left and top, you can use the LEFTMARGIN and/or TOPMARGIN attributes in the BODY tag. Netscape ignores the attributes.

Example: <BODY leftmargin = 30 topmargin=40>

à this makes the left margin to be 30 pixels and the top margin to be 40 pixels.

Alignments

You can align paragraphs and headers using the ALIGN attribute in the P tag, as shown in the examples below:

    <P align=center>This text will show up centered.</P>
    <P align=right>This text will show up on the right side of the page.</P>
    <P align=left>This will show up on the left, which is the default.</P>

There is also a general tag for centering texts and other objects.

1. Type <CENTER>.
2. Create the element that you wish to center.
3. Type </CENTER>.

Too bad that we have no RIGHT tag!

Indents

**Netscape Only**
There is no tab in HTML. Netscape recognizes SPACER tag that will let you create indents.

1. Type <SPACER where you want the spacer to appear.
2. Type TYPE = horizontal. (You can also create extra space between paragraphs using a vertical type SPACER.)
3. Type SIZE = n, where n is the indent size in pixels.
4. Type the final > tag.
5. Type the text of the indented paragraph.

Another way to create indents is with lists or blockquotes:

1. Type <UL> or <BLOCKQUOTE>.
2. Type the text that you want indented.
3. Type </UL> or </BLOCKQUOTE>.


Figure 2.10: The top shows a sample page displayed in IE, and the bottom one the same page in Netscape. Notice the differences. 


Figure 2.11: The source code for Figure 2.10.

Changing the Background Color or Image

If you'd like to be a bit more artsy with your web page, you can add color or a fancy image in the background. The background image, or backdrop, should not distract the readers.

To change the background color,

1. In the BODY tag, type BGCOLOR= "hexnumber or colorname".
2. If you change your background to a dark color, make sure to change the text & link colors also. (You will learn how to change the link color later.)

To add a backdrop,

1. In the BODY tag, type BACKGROUND= "image_name.ext", where image_name is the name of your image file, and ext is the image extension (GIF, JPEG, etc).
2. Note that the browsers automatically tile smaller images when creating your background.

Exercise 4: Refining your web page from exercise 3.

1. Italicize the your quote.

2. After the quote, type your favorite day (e.g., your birthday) with the -st, -nd, -rd, or -th endings in superscripts. Example -- My birthday is February 14th.

3. Center your top greeting and 'Hello, World!' text.

4. Change the background to this color: #C6E7DE.


Figure 2.12: Your web page should look something like this after Exercise 4.

Back to the Top
To the Table of Contents

Last Updated September 9, 2000 by Grace Pok