20. Extra Alignment

Why just stay over to the left?

... when you can move to the right?

or just hang out in the middle?

Text Alignment

As the web grew and grew and grew, there was demand for more control over page layout. One desire was to format text that was aligned to the center of a page, rather then just justified to the left margin.

This gets into one of those sticky Netscape versus "standard" HTML situations. Netscape introduced an HTML extensions -- <center>...</center> tag -- it aligns everything inside the tags with the center of the web page. Seems to make sense? Well, if you talk to a mark-up language purist, alignment is an attribute. The more general HTML (and "standard") for center alignment is a variation on the <p> tag:

  <p align=center>
  blah blah blah
  <img src="file.gif"><br>
  blah blah
  </p>

Note that now there is a closing </p> tag. This becomes important later when we get into Style Sheets and other design features of HTML 4.0. Also, if you are center aligning several paragraphs, each one will have to be marked with a separate <p align=center>...</p>

Most other browsers and the HTML 3.2 standards now support Netscape's <center>...</center> tags. Remember that if a browser does not support a tag, it will just ignore it.

NOTE: Look closely at the changes we have made. This whole section is enclosed in the <p align=center>..</p> tags for alignment. The unordered list we built in lesson 6 would look odd centered -- the bullet marks would be staggered. So we have removed the <ul><li>...<li>...</ul> structure. The <br> tags at the end of each line will force a line break.

And finally, we have added a <font>...</font> tag to increase the text size. (Note, this may not work on all web browsers; reports are that the font will not be resized in Internet Explorer version 4).

If you wish you could also use the <center>...</center> tags in place of <p align=center>...</p>

Any header <hN>...</hN> tag may be center aligned by adding the attribute:

  <hN align=center>blah blah blah</hN>

We will now use this attribute to center the title of each web page:

1. Open all of your other HTML files in your text editor.
2. For each one, edit the text that appears near the top, in <h1> or <h2> tags, following this example from file intro.html:

     <h2>Introduction</h2>

   to

     <h2 align=center>Introduction</h2>

3. Save and Reload into your web browser.

NOTE: There is also an align attribute for the <hr> tag that is relevant to the other options we reviewed in lesson 19 "Easy Horizontal Rules". When you specify a shorter width for a horizontal rule, you can also specify that it be aligned to the left or the right (the default is to center align horizontal rule lines):

Aligning Images and Text

In lesson 7a we learned how to put images in our pages and saw that we could have one line of text align with the top, middle, or bottom of an image. However, up to now, we could not have a block of text sitting side by side with an inline image.

With the align attribute in the <img> tag we can specify to have the image itself aligned to the right or left margin of the page. But more so, we can have any HTML following it "fill" in around the empty space. The HTML to do this is:

  <img src="filename.gif" align=right>
  <img src="filename.gif" align=left>

Compare these two examples:

Shrink and stretch your web browser window to see how it affects your page with aligned images/text.

One more note. There will be times when the text or other items that are aligned with the image are rather short and you want to force the next text to jump down below the image. There is an attribute for the <br> tag to clear the alignment:

  <br clear=left>
  <br clear=right>
  <br clear=all>

that will "clear" (or disable) any preceding alignments set up in the <img> tags. We suggest that you always use these tags because the alignment will vary depending on the font specified in the reader's web browser and the width of their browser window.

previous: "Easy Horizontal Rules" | next: "Tables" |