Step 10 – Center

Centering text or other parts of your design is very simple. To center everything in my index.html I add this:

<HTML>
<HEAD>
<TITLE>my own homepage</TITLE>
</HEAD>

<BODY BACKGROUND=”images/background.gif” BGCOLOR=”#FFFFE1″ TEXT=”#808080″ LINK=”#FF9B6A” ALINK=”#FF9B6A” VLINK=”#FF0000″>

<CENTER>
<FONT FACE=”Verdana” SIZE=2>

<H2>A short introduction</H2>

<FONT COLOR=”#FF9B6A”><B>Nora Tol Virtual Publishing</B></FONT> was founded about 12 years ago when owner <FONT COLOR=”#FF9B6A”>Nora Tol</FONT> started offering her web design services.
<P>
By demand she quickly expanded her services with <U>designing logos and artwork (DTP)</U> and even started various <U>Internet- and marketing services</U>.
<P>
<FONT SIZE=4>Take a look at her homepage for more information.
<BR>
Or send her an E-mail!</FONT>

<HR WIDTH=50% COLOR=#000000 NOSHADE SIZE=2>

</FONT>
</CENTER>
</BODY>
</HTML>

As you can see I open the CENTER-tag before my first line of text and close it after the HR-tag. Anything in between <CENTER> and </CENTER> is now centered. I could’ve also placed the first CENTER-tag after the FONT-tag. You can even open the CENTER-tag before the H2-tag and end it right after the HR-tag. You’re free to decide where you want it.

To center a selection only, the code would look like this:

<HTML>
<HEAD>
<TITLE>my own homepage</TITLE>
</HEAD>

<BODY BACKGROUND=”images/background.gif” BGCOLOR=”#FFFFE1″ TEXT=”#808080″ LINK=”#FF9B6A” ALINK=”#FF9B6A” VLINK=”#FF0000″>

<FONT FACE=”Verdana” SIZE=2>

<CENTER>
<H2>A short introduction</H2>
</CENTER>

<FONT COLOR=”#FF9B6A”><B>Nora Tol Virtual Publishing</B></FONT> was founded about 12 years ago when owner <FONT COLOR=”#FF9B6A”>Nora Tol</FONT> started offering her web design services.
<P>
By demand she quickly expanded her services with <U>designing logos and artwork (DTP)</U> and even started various <U>Internet- and marketing services</U>.
<P>
<CENTER>
<FONT SIZE=4>Take a look at her homepage for more information.
<BR>
Or send her an E-mail!</FONT>

<HR WIDTH=50% COLOR=#000000 NOSHADE SIZE=2>
</CENTER>

</FONT>
</BODY>
</HTML>

With the above code I’ve centered the head and the last bit of text.

Go to Step 11

Bookmark the permalink.

Comments are closed