Basic Guide For Writing Web Pages -- Introduction / Table Of Contents / Previous Page / Next Page

Basic Web Page Writing Step 5
Centering And Alignment

In step 4 you used Headers to make a section of your page stand out. Now you will see how you can center headers and text on a page.
This step will introduce one of the tags that are an enhancement to HTML 2.0. The CENTER tags: <CENTER> and </CENTER>. You will also see how the ALIGN option give you further control of the placement of text and headers.
You can see an example of a header that is centered at the top of this page. The two lines that read "Basic Web Page Writing Step 5 - Centering And Alignment" is how a Header will appear on your page when centered.

Centering Text

To center text all you need to do is type the text inside the center tags as shown below.

<CENTER>This Text Is Centered</CENTER>

This Text is Centered

You can also center an entire paragraph if you enclose the paragraph with the center tags as well as the pre format tags. See example below.

<CENTER>
<PRE>
This little paragraph will appear centered
on the page since the preformatted
text is also enclosed with the CENTER
start and CENTER end tags.
</pre>
</CENTER>

Which would produce the following: 

This little paragraph will appear centered
on the page since the preformatted
text is also enclosed with the CENTER
start and CENTER end tags.

You can also center headers by doing the same thing.

<CENTER><H2>This Header is Centered<H2></CENTER>

This Header is Centered

Using The Alignment Option

The Align option added to a Header tag or the Paragraph tag gives you more control over the placement of you text.

The Align options are LEFT, CENTER and RIGHT.

To use the Align option the word Align= is placed after the start tag of the Header or Paragraph tags but before the > bracket and the LEFT, CENTER or RIGHT follows. See the example below for a Header that is Aligned to the Right.

<H3 Align=RIGHT>This Header is Aligned to the Right</H3>

This Header is Aligned to the Right

Notice how the Align= option is inside the > of the Header Start Tag!! You can experiment with the Left and Center options as well. Omitting the Align option will default to the left.

You can also align a paragraph if you enclose the paragraph with a start and end tag. See below:

<PRE>
<p Align=RIGHT>
This Short Paragraph
Is Aligned to the Right</p>
</PRE>
Will Appear as


This Short Paragraph
Is Aligned to the Right

Also note that the <PRE> and </PRE> tags were used to keep the text in the preformatted form as in step 3 of this guide.

Try centering and aligning  some text and headers on your own page. Open your webpage.htm and try these out.




You now know how center and align headers and text in your web page. In step 6 you will see how to make individual parts of the text stand out.

STEP 6  -- Emphasizing Text



      

        
Basic Guide For Writing Web Pages --
        Introduction /  Table Of Contents / 
       Previous Page /   Next Page



      created by Larry Curreri, 



© 1996 l_curreri@yahoo.com

 Visit My Home Page 

      
                last modified: January 14, 2002

This page hosted by   Get your own Free Home Page