16. Jazzing Up Text

Well not only can you colour your background, you can colour your text, also colour RESIZE and even change the Style of font your using.

You can also do things like CO² and H₂0 for examples.

With the HTML introduced by Netscape and HTML 3.2, you had more options for formatting the text on your page. Specifically, you can also create different sized text as well as different coloured text too. When used properly, the text formatting can enhance the layout of a web page. When it's used with recklessness, it can produce web pages that look like noise.

You could also now create superscript and subscripts used within mathematical expressions, chemical formulas, or as footnote markers.

On this page we will introduce to you these text features with some examples that you can use to modify your site.

FONT SIZE

The <font> .. </font> tags introduced by Netscape may be used to set the size of your fonts from 1 (smallest) to 7 (largest) with a size of 3 being the normal text size:

Font Size = 1 Font Size = 2 Font Size = 3 Standard Size Font Size = 4 Font Size = 5 Font Size = 5 Font Size = 7

Now you must take into consideration that the actual size will also depend on the computer font the user has selected for their web browser -- you are adjusting the size relative to the default font they have chosen.

The format for the font size tag is:

    <font size="N"> ... </font>

Where N = 1 though to 7. The font tag may also be used with other style tags (lesson 5) or inside the header tags (lesson 3).

Now the other way of using the font tag is to provide a relative size change:

   <font size="+1">This is your text.</font>
   <font size="-2">This is your text.</font>

i.e. where the +N or -N value provides the offset from the current font size.

You might want to do this in one of your web pages that would most likely have portions of text that are larger or smaller than standard font size. That way, if you need to adjust only small portions of text on the page, you can use the relative font size tags shown above.

If a web browser doesn't support the <font> tags, you may want to try the HTML 3.0 tags:

   <big> ... </big>
   <small> ... </small>

It gives you less font sizes to work with but can still be useful for those browsers.

This is small This is normal This is big

We are now going to use the <font size="N"> tag to change the title in our opening page:

1. Open the index.htm file in your text editor.
2. We originally used a <h1>..</h1> header tag to display the title of our web page. We are now going to use some font size tags instead to create a mixed size title.

   Change the line that reads:

      <h1>Eazy Space Tours</h1>
   			  
      to:
   			  
   <p>
   <b><font size="+4">E</font>
   <font size="+3">AZY SPACE TOURS</font></b>
   </p>

   Now look at what we have done to the page -- the first E has now been increased in size by 4 units above the standard base font value, and the rest of the letters have also been increased by 3 units above base font value. This has provided the layout style of SMALL CAPS. We also have added the <b>...</b> tag to make the title we just created stand out. And because we are no longer using a header tag at the top that carries a line break by default, we have added <p> tag to the title to force it to appear on a new line

3. Now we want the quote from Alcott stand out stand out a bit more, so we are going to raise it one font size. This is in our venus.htm file:

   <b><i><font size="+1">"Nature raves savagely, 
     threatening the lands"</font></i></b><br />

4. Save and Re-Load into your web browser

Do you see the difference between using the <font> tags and the <hN> tags for your section titles? The formatting differences are subtle, but what it does offer you, the HTML author, alternatives for you to use in your web page design. Just remember that if a reader's browser does not support font size tags, they will see all the text as the standard size.

Two Ways Of Creating Headers
<h3>...</h3>	<p><b><font size="+1">...</font></b></p>
Bread And Butter. Bread And Butter. Bread And Butter. Bread And Butter. Header Tag Bread And Butter. Bread And Butter. Bread And Butter. Bread And Butter.	Bread And Butter. Bread And Butter. Bread And Butter. Bread And Butter. Font Tag Bread And Butter. Bread And Butter. Bread And Butter. Bread And Butter.

FONT COLOUR
In lesson 15, we looked at the tags for colouring the text of the entire web page as well as the proper hexadecimal format for representing colour values in HTML. Well you can also add an attribute to the <font> tag to colour a selected portion of text using the hexadecimal codes or the colours recognized by their names:

font color="red"
font color="#990099"
font color="lime"
font color="navy"

OK, let's add some colour to our heading of out title page for an experiment.

1. Open the index.htm file in your text editor.
2. Edit the line that contains the text of EAZY APACE TOURS to read:

   
   <p>
    <b><font size="+4" color="#FF6600">E</font>
    <font size="+3" color="#CC6600">AZY SPACE TOURS
    </font></b>
   </p>
   			  

3. Save and Re-Load in your browser.

Notice that the size and the colour attributes can reside together inside a single <font> tag. The effect we made here makes the "E" a brighter orange colour and one size larger than the other letters.

Superscripts and Subscripts
Until HTML 3.0 you were seriously out of luck if you needed to write mathematical expressions, chemical formulas, or other expressions that required the use of superscripts and/or subscripts. These new tags raise/lower the "scripted" text one half line and sizes it one size smaller.

The HTML format for these are:

We will now use these examples of tags on our Venus page:

1. Open the venus.htm file in your text editor.
2. Now we are going to use subscripts to write some chemical formulas. Place this under the paragraph ending “colonization of the planet Venus for the past 10 years”

   <p>
     Volcanoes were important contributors to 
     the early Venus atmosphere by releasing 
     gases such as nitrogen (N<sub>2</sub>), 
     carbon dioxide (CO<sub>2</sub>), and 
     ammonia (NH<sub>4</sub>).
   </p>	

3. Now we are going to use superscripts to display a cubic volume. Below the table we created with the <pre>...</pre> tags, in our issapissin.htm add this sentence:

   <p>
     Remember that	volcanic eruptions that occurred 
     before historic times were several orders 
     of magnitude larger (more than 1000 km3 
     in erupted volume) than ones observed by 
     humans know today.
   </p>

4. You will also notice that in the third column of our table, when we first wrote the table we had to use "km^3" to signify "km3". Even though this text is inside the preformat tag, we can still use the superscript tag. To do this change:

      Volume in km^3
   
   to	
   
      Volume in km3

5. Save and Re-Load into your browser.

FONT FACE
Since the HTML 3.2 standards were introduced it included the <font> tag to specify a particular screen font for text display.

The HTML for specifying a font face is:

   <font face="font1,font2,font3">Some text here</font>

If a viewer's web browser supports the font FACE attribute and they have one of the fonts you listed in you font tag installed on their computer, then the text they are reading on screen will be displayed with the specified font. Otherwise, it will use the same font as the rest of the web page.

If you choose to use the font face attribute, you should select a face that is standard to most computers or be sure that the intended computers have any "exotic" fonts installed that you're using.

Now we are going to modify the <font> tag again for our title page so that the words "Eazy Space Tours" appear in a different font to the rest of the page:

1. Open the index.htm file in your text editor.
2. Edit the line that contains the text of EAZY SPACE TOURS to read:

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

3. Save and Reload in your web browser

Notice that we have included two specifiers for the browser to choose Arial for Windows and Helvetica for Macintosh and/or computers that do not have the Arial font installed.

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. And remember you don't have to use the same colours I have, you can choose and colour you like for your text.

Practice
Experiment with the font tag attributes on your documents and see the effects you can come up with on your page.

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