Writing HTML | About | FAQ | Alumni | References | Tags | Lessons | back | next |

20. Extra Alignment

Objectives

• Create text that is aligned to center of the page.
• Align images and blocks of text.
• Create text that is right justified.

Lesson

Text Alignment

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. A more general HTML for center alignment is a variation on the <p> tag:

  <p>
  blah blah blah
  <img src="file.gif"><br>
  blah blah
  </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:

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

1. Open up the index.html file in your text editor.
2. 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>
   

3. 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.

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>

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 Hard Rules". When you specify a shorter width for a hard rule, you can also specify that it be aligned to the left or the right (the default is to center align hard rule lines):

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

will produce:

while using left alignment

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

produces:

Aligning Images and Text

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>

no align attribute align=bottom
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 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.

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>

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.

1. Open the index.html file in your text editor.
2. 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>

3. 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.

Text Justification/Alignment

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

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:

1. Open your index.html file in your text editor.
2. 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>

3. Save and then Reload in your web browser.

Check Your Work

Review

1. How do you make certain parts of your web page aligned to the center of the page?
2. What is the correct way to make an inline image aligned to the right side of the web page?
3. How can you create text that is right justified?

Independent Practice

Coming Next....

GO TO.... | Lesson Index | back: "Easy Hard Rules" | next: "Tables" |

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