Study Guide: Web Design - Formatting Text

There are many ways to format text in a web page. One way is to use heading tags. There are 6 levels of headings. The tags look like this:

<H1> </H1>

<H2> </H2>

<H3> </H3>

<H4> </H4>

<H5> </H5>

<H6> </H6>

<H7> </H7>

These tags are like levels of an outline and can be used to organize your text as well as differentiate between the display of each level. The H1 is the most important, and largest heading, moving all the way down to H7.

Here's an example of how these levels might be used:

<H1> My Home Page </H1>

<H2> My Professional life </H2>

<H3> My resume </H3>

<H2> My town </H2>

<H2> My other interests</H2>

These headings are indented here, but when displayed by a browser, this white space is ignored. Each heading will be displayed with a different appearance, but the appearance is browser dependent, so you won't necessarily know how your page will be displayed to a visitor of your site. Therefore, you should use these heading tags only for actual headings, not just to make text look a certain way. Later, we'll look at other ways to control the way text appears.

The paragraph tag is used to delineate paragraphs. <P> indicates the beginning of a paragraph and </P> marks the end. Here's an example:

<P> He heard a fiddle tune pierce the cool night air. As he walked down the alley, he saw the source. A cat, sitting atop a fence, played feverishly. </P>

<P> At that moment, a shadow caught his eye. A silhouette of a cow moved across the full moon. </P>

If you'd like to center some text in the browser window, use the <CENTER> tag:

<CENTER> My first web page </CENTER>

Exercise: Incorporate these three tags into your page. You'll need to make some content for your page. Make a centered heading at the top of your page. It will look similar to this:

<CENTER> <H1>Welcome to my first web page </H1> </CENTER>

Now put a few paragraphs of text on your page. View the page in a browser. (You will find you need to save your html file every time you make changes. Also, when you view the page in a browser, you may need to click the reload or refresh button to see the updates you just made.)

As you view your page, resize the browser window. What happens to the centered text and the paragraphs?