Text; Alignment and Font Sizes

Alignment of Text

Simply stated, alignment refers to the horizontal postition you'd like your text to be placed on the page. There are methods to position your text vertically, but that is typically decided in a somewhat appropriate manner as you construct your page (although, certainly, you can make your page as complicated as you choose). To place your text to the left, center, or right side of a page, we'll simply add the appropriate attribute inside the text tag. Here's examples in three different alignment positions:

Left

Center

Right

To create the above alignment, we would write the code like this:


                <h3 align="left">Left</h3>

                <h3 align="center">Center</h3>

                <h3 align="right">Right</h3>

			

Text sizes

Text size, otherwise known as font size can be controlled in a few ways. But, here is one of the simplest methods. Simply stick with the various header sizes, H1 through H6, or use the P for standard text size you'd use in the body of a paragraph.

Of course, you can control the font styles and sizes to something more specific, if you wish, by stating that in CSS or inline with the FONT tag and the desired attribute. However, to make your life easier and help assure accessibility to various browsers, I'll recommend leaving the browser to use its default font styles. You can explore those options later if you decide that you deparately need those options.

So, let's go back to our font size options I already mentioned. Here is what each header size will look like (ignore the colors--- I have some of the header sizes set to automatically display with a specific color in my CSS style sheet):

h1

h2

h3

h4

h5
h6

Again, you can add an alignment attribute to these to help place them on your page. Since I did not specify the alignment when I wrote the code for the above header samples, the default "left" alignment takes over.

For now, you can remain fairly comfortable in using these HTML alignment attributes and, even though all are not necessarily standards compliant, they are still well supported by browsers. Later, you'll want to take a look at CSS for specifying layouts so your pages are supported according to W3C standards.

So, let's apply what we've learned to the page we've already begun by changing some of the text sizes. I'll just pick out a couple of text sizes of my own. You can do what you like, but my code would now look like this:

Changed text sizes

                <html>

                    <head>

                        <title>

                            Text Size and Position

                        </title>

                    </head>

                    <body bgcolor="BFE2F9">

                        <table bgcolor="808080" height="100" width="100%">
                            <tr><td>
                                <h1>Here's our logo bar!</h1>
                            </td></tr>
                        </table>

                        <h2>Header Sizes</h2>

                        <h3 align="center">Centered subheader</h3>

                        <p>
                            This is an example of default text style and size for a paragraph using the P tag
                        </p>

                        <p align="right">
                            Just as with the header tags, I can shift the text by adding the ALIGN attribute 
to the P tag, making this paragraph appear to the right side of the page.
                        </p>

                    </body>

                </html>

			
Here's what the page looks like with the text formatting

In case you haven't already figured it out, notice that the title displayed at the top of the browser window and on the page tab has changed for the sample code. Note that I have changed the contents between the TITLE tags to "Text Size and Position". This is where you would change your page titles to display what you want your own site visitors to see.

Lesson 4; Navigation links and table borders