18. Extra Alignment

TEXT ALIGNMENT
As the web 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.

So as HTML 4.0 came into effect there was more features added.. Including alignment attributes.

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

But what about the <center>...<center> tags you ask??? Well it aligns everything inside the tags with the centre of the web page. Makes sense I know but this tag is now deprecated.

<p align="center"><strong><font size="+2">Heading</font>
</strong></p>
<p align="center">Bread and butter. Bread and butter. 
Bread and butter. Bread and butter. </p>
<p align="center">Blah Blah Blah Blah Blah Blah Blah Blah 
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
 Blah Blah Blah Blah Blah </p>
<p align="center"><img src="images/buttonleft.jpg" border="0" />
<br />
Return to Home Page.</p>
			

The Code Above Looks like this in our web browser.

Heading Bread and butter. Bread and butter. Bread and butter. Bread and butter. Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Return to Home Page.

OK so Now we are going to modify our cover page (index.htm) to use the <p align="xxx">...</p> tag on the list of lesson sections. We will also make some other changes to improve its appearance.

1. Open up the index.htm file in your text editor.
2. Find the section that looks like:

   <b>In this Lesson...</b>
    <ul><i>
      <li><a href="content/intro.htm">
        Introduction</a></li>
      <li><a href="content/venus.htm">
        Venus</a></li>
      <li><a href="content/volcanic.htm">
        Volcanic Tours Of Venus</a></li>
      <li><a href="content/tropical.htm">
        Tropical Centres Of Venus</a></li>
      <li><a href="content/uranus.htm">
        Uranus</a></li>
      <li><a href="content/mtwanna.htm">
        Skiing On Mt. WannaHockALoogie</a></li>
      <li><a href="content/lakeunix.htm">
        Skating on Lake Unix</a></li>
   </i></ul>
   <hr />
   
    And Change it to look like this
   			  
   <p align="center">
   <b>In this Lesson...</b>
    <font size=+1><i>
      <a href="content/intro.htm">
        Introduction</a><br />
      <a href="content/venus.htm">
        Venus</a><br />
      <a href="content/volcanic.htm">
        Volcanic Tours Of Venus</a><br />
      <a href="content/tropical.htm">
        Tropical Centres Of Venus</a><br />
      <a href="content/uranus.htm">
        Uranus</a><br />
      <a href="content/mtwanna.htm">
        Skiing On Mt. WannaHockALoogie</a><br />
      <a href="content/lakeunix.htm">
        Skating on Lake Unix</a><br />
   </i></font>
   <hr />
   </p>			  
   			  

3. Save and Re-Load into your web browser.

Ok now take a look at the changes we just made. This section is enclosed in the <p align="center">..</p> tags for alignment. The unordered list that we built for the menu in lesson 6 would look very odd centered -- the bullet marks would be staggered all over the place. So we have removed the <ul><li>...<li></ul> structure, and added <br /> tags at the end of each line to force a line break.

And finally, we have added a <font size="xx">...</font> tag to increase the text size.

You can compare your HTML file to an EXAMPLE of how it should look at this point.

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

   <hN align"center">...</hN>

We will now use this attribute to centre 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 of your pages, in the <h1> or <h2> tags, following this example:

     <h2>Introduction</h2>
     
      To this			  
     
     <h2 align="center">Introduction</h2>

3. Save and Reload into your web browser.

ALIGNING IMAGES & 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 now 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">

Your Heading Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah

Your Heading Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah

Also. There is going to 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.

IMAGE SPACE PADDING
Sometimes when using the right or left alignment with an image, you might notice that the text wraps too close to the image. There is an option that you can add on to the <img.../> tags to add more padding or space around your image:

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

The vspace and hspace options on the <img.../> tag put the amount of pixels specified of space above and below (vspace) or on the left and the right (hspace) of the image. So we could modify our example above to look like:

The Heading This example has no vspace or hspace assigned to it.

The Heading The example has a vspace of 12 and an hspace of 15. Can you see the difference of the lay out now of the image and the way the text is now sitting around the image and the way it sits on the page?

ADDING IMMAGE ALLIGNMENT

Now let's put some alignment onto your index page.

1. Open the index.htm file in your text editor.
2. Find the portion that reads:

   <img src="content/images/spaceship.jpg" 
   alt="Eazy Tours Luxury Liner the Widow Maker" 
   width="310" height="243" align="left" />
   <p>
    <b><font face="Arial,Helvetica" 
    font size="+4" color="#FF6600">E</font>
    <font face="Arial,Helvetica" size="+3" 
    color="#CC6600">AZY SPACE TOURS</font></b>
   </p>
   <p> In this lesson you will use the Internet to research 
       information on Space Tours and then write a report on 
       your results.
   </p>
   <hr />
   <p align="center">
   <b>In this Lesson...</b><br />
    <font size=+1><i>
      <a href="content/intro.htm">
        Introduction</a><br />
      <a href="content/venus.htm">
        Venus</a><br />
      <a href="content/volcanic.htm">
        Volcanic Tours Of Venus</a><br />
      <a href="content/tropical.htm">
        Tropical Centres Of Venus</a><br />
      <a href="content/uranus.htm">
        Uranus</a><br />
      <a href="content/mtwanna.htm">
        Skiing On Mt. WannaHockALoogie</a><br />
      <a href="content/lakeunix.htm">
        Skating on Lake Unix</a><br />
   </i></font>
   
   
   
       And change it to read:	
   			  
     <img src="content/images/spaceship.jpg" 
   alt="Eazy Tours Luxury Liner the Widow Maker" 
   width="310" height="243" align="left" />
   <p>
    <b><font face="Arial,Helvetica" 
    font size="+4" color="#FF6600">E</font>
    <font face="Arial,Helvetica" size="+3" 
    color="#CC6600">AZY SPACE TOURS</font></b>
   </p>
   <p> In this lesson you will use the Internet to research 
       information on Space Tours and then write a report on 
       your results.
   </p>
   <hr />
   <br clear="left" />
   <p align="center">
   <b>In this Lesson...</b><br />
    <font size=+1><i>
      <a href="content/intro.htm">
        Introduction</a><br />
      <a href="content/venus.htm">
        Venus</a><br />
      <a href="content/volcanic.htm">
        Volcanic Tours Of Venus</a><br />
      <a href="content/tropical.htm">
        Tropical Centres Of Venus</a><br />
      <a href="content/uranus.htm">
        Uranus</a><br />
      <a href="content/mtwanna.htm">
        Skiing On Mt. WannaHockALoogie</a><br />
      <a href="content/lakeunix.htm">
        Skating on Lake Unix</a><br />
   </i></font>
     

TEXT JUSTIFICATION/ALLIGNMENT
We will also 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>	

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

1. Open your index.htm file in your text editor.
2. Add the <div>...</div> tags as shown below:

   <div align="right">
   <p>
    <b><font face="Arial,Helvetica" 
    font size="+4" color="#FF6600">E</font>
    <font face="Arial,Helvetica" size="+3" 
    color="#CC6600">AZY SPACE TOURS</font></b>
   </p>
   <p> In this lesson you will use the Internet to research 
       information on Space Tours and then write a report on 
       your results.
   </p>	
   </div>  

3. Save and then reload in your web browser.

CHECK YOUR WORK
Compare your web pages with this EXAMPLE 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.

INDEPENDENT PRACTISE
Experiment with some of the align="xxxx" attribute options in your own web pages.

Top of page | Previous Lesson| Lessons Index | Next Lesson