Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | previous | next |

20. Extra Alignment

Why just stay over to the left?

... when you can move to the right?

or just hang out in the middle?

Objectives

After this lesson you will be able to:

Create text that is aligned to center of the page
Align images and blocks of text
Add specified spacing around images
Create text that is right justified

Lesson

Note: If you do not have the working documents from the previous lessons, download a copy now. Also, you may want to first look at the test page to see if your browser supports the tags used in this lesson.

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.

For the effect of center alignment, compare:

Cheese In History

Cheese has been there for many major events

When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack.

return to the cheese home page

with this example that center aligns the content:

Cheese In History

Cheese has been there for many major events

return to the cheese home page

Now we will modify our cover page (index.html) to use the <center>...</center> tag on the list of lesson sections. We will also make some other changes to improve its appearance.

Open up the index.html file in your text editor.

Find the section that looks like:

  <B>In this Lesson...</B>
  <ul>
  <i>
  <li><A HREF="intro.html">Introduction</A>
  <li><A HREF="term.html">Volcano Terminology</A>
  <li><A HREF="usa.html">Volcanic Places in the USA</A>
  <li><A HREF="mars.html">Volcanic Places on Mars</A>
  <li><A HREF="proj.html">Research Project</A>
  </i>
  </ul>

and replace it with the following HTML:

  <p align=center>
  <font size=+1>
  <i>
  <A HREF="intro.html">Introduction</A><br>
  <A HREF="term.html">Volcano Terminology</A><br>
  <A HREF="usa.html">Volcanic Places in the USA</A><br>
  <A HREF="mars.html">Volcanic Places on Mars</A><br>
  <A HREF="proj.html">Research Project</A><br>
  </i>
  </font>
  </p>

Save and Load into your web browser.

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>

You may want to compare your HTML file to an example of how it should look at this point.

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:

Open all of your other HTML files in your text editor.
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>
```
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):

<hr size=8 width=60% align=right> :

<hr size=8 width=60% align=left> :

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:

no align attribute
align=bottom (default if none specified)

Cheese In History

Cheese has been there for many major events
When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack.

text flow
align=left

Cheese In History

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.

Image Space Padding

Sometimes when you use the right or left alignment with an image, the text wraps a bit too close to the image. There is an option you can add to the <img> tags to add more padding or space around your image:

  <img scr="my_image.gif" alt="My Image" width=79 height=142 vspace=8 hspace=12>

The vspace and hspace options put the amount of pixels specied of space oabove and below (vspace) or on the left and the right (hspace) of the image. So we could modify our example above to look like:

text flow with no spacing
align=left

Cheese In History

text flow with spacing
align=left, vspace=10 hspace=18

Cheese In History

Adding Image Alignment to our Volcano Site

We will now return to our index.html page to re-format the opening screen. The picture may look nice, but it takes more vertical space to have the picture followed by the text below. We will use the image/text alignment to put some of the text adjacent to the image.

Open the index.html file in your text editor.

Find the portion that reads:

  <img alt="A Lesson on:"   src="../pictures/lava.gif">
  <p>
  <B><font size=+4 color=#FF66FF>V</font>
  <font size=+3 color=#DD0055>OLCANO WEB</font></B>
  <BLOCKQUOTE>
  <B><I><font size=+1>"Nature raves savagely, 
  threatening the lands"</font></I></B><br>
  -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
  Pliny the Elder</A>, who died of asphyxiation after 
  observing the destruction of Pompeii by the
  79 A.D. eruption of Mount Vesuvius.
  </BLOCKQUOTE>

  In this lesson you will use the Internet
  to research information on volcanoes and then 
  write a report on your
  results.

and replace it with:

  <img alt="A Lesson on:" src="../pictures/lava.gif"   align=left>
  <B><I><font size=+1>
  "Nature raves savagely, threatening the lands"
  </font></I></B><br>
  -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
  Pliny the Elder</A>, who died of asphyxiation after 
  observing the destruction of Pompeii by the
  79 A.D. eruption of Mount Vesuvius.
  <p>
  <B><font size=+4 color=#FF66FF>V</font>
  <font size=+3 color=#DD0055>OLCANO WEB</font></B>
  <p>
  In this lesson you will use the Internet
  to research information on volcanoes and then write a report on your
  results.
  <br clear=left>

Save and Reload in your web browser.

NOTE: Everything between the <img... align=left> tag and the <br clear=left> tag will be placed adjacent to the picture -- the image is aligned left and the other HTML fills the empty space.

We also put the quotation at the top to attract attention. With this new layout, the <blockquote> tag is not effective, so it was removed.

You may want to compare your HTML file to an example of how it should look at this point.

Text Justification/Alignment

We will add in one more alignment tag, the "divisions" tag <div>...</div>, introduced as part of HTML 3.0. All text within the tag is justified according to the align attribute:

  <div align=left>...</div>
  <div align=right>...</div>
  <div align=center>...</div>

Note that the center attribute accomplishes the same effect as the Netscape <center>...</center> tag.

We will now use this tag to make the opening quotation on our cover page have its text aligned to the right margin of the page:

Open your index.html file in your text editor.

Add the <div> and </div> tags as shown below:

  <div align=right>
  <B><I><font size=+1>
  "Nature raves savagely, threatening the lands"
  </font></I></B><br>
  -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
  Pliny the Elder</A>, who died of asphyxiation after 
  observing the destruction of Pompeii by the
  79 A.D. eruption of Mount Vesuvius.
  <p>
  <B><font size=+4 color=#FF66FF>V</font>
  <font size=+3 color=#DD0055>OLCANO WEB</font></B>
  </div>

Save and then Reload in your web browser.

Check Your Work

Compare your web pages with this sample of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor.

Review

Review topics for this lesson:

How do you make certain parts of your web page aligned to the center of the page?
What is the correct way to make an inline image aligned to the right side of the web page?
How can you insert 10 pixels of space between a left side aligned image and the text that wraps it?
How can you create text that is right justified?

Independent Practice

Try making some of your text centered- aligned or right margin aligned.

Coming Next....

Let's set up

a pretty table...

GO TO.... | Lesson Index | previous: "Easy Horizontal Rules" | next: "Tables" |

Writing HTML: Lesson 20: Extra Alignment
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

The 'net connection at MCLI is Alan Levine
Comments to alan.levine@domail.maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut20.html