Not only can you color the background but you can color, SIZE, and even change the font typeface for specific portions of text! How much would you pay?
But WAIT! You can now write superscripts and subscripts for fun things like chemistry and math:
CO2 + SO4-2
3x2 - 2y-1/2 = 4z
After this lesson you will be able to:
Note: If you do not have the working documents from the previous lessons, download a copy now.
With the HTML introduced by Netscape and HTML 3.2, you have some more options for formatting your text. Specifically, you can create different sized text as well as different colored text. When used judiciously, the text formatting can enhance the layout of a web page. When used with reckless abandon, it can produce web pages that look like noise.
You can also now create superscript and subscripts used in mathematical expressions, chemical formulas, or as footnote markers.
In this lesson we will introduce you to these text features with some examples that you will use to modify your Volcano Web pages. You may want to first refer to the font test page to determine if your web browser supports the tags used in this lesson.
The <font>..</font> tag introduced by Netscape may be used to set the size of the font from 1 (smallest) to 7 (largest) with a size of 3 being the normal text size:
Font Size = 2
Font Size = 3 -- normal size text
Font Size = 4
Font Size = 5
Font Size = 6
Font Size = 7
Remember that the actual size will 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>blah blah blah</font>
where N=1 to 7. The font tag may be used in conjunction with other style tags (lesson 5) or inside header tags (lesson 3).
The other method for using the font tag is to provide a relative size change:
<font size=+1>blah blah blah</font> <font size=-2>blah blah blah</font>
i.e. where the +N or -N value provides the offset from the current font size. This is used with another tag:
which changes the base font size from its default value of 3 to some other value. You might do this in a web page that will mostly have text of a larger or smaller than standard font size. That way, if you need to adjust small portions of the page, you can use the relative font size tags shown above.
The power of using relative font size tags (e.g. size=+2) over absolute size tags (e.g. size=5) is that we could easily shift the size of ALL text in that page by changing one instance of the <basefont> tag.
Note: The <basefont> tag has no closing tag -- it continues to be the base font size until another <basefont> tag occurs.
If a web browser does not support the <font> tags, you may want to try the HTML 3.0 tags:
which gives you less font sizes to work with but can still be useful for those browsers.
This is normal size
This is the SMALL tag
We will first use the <font size=X> tag to modify the title in our opening page:
<p> <b><font size=+4>V</font><font size=+3>OLCANO WEB</font></b>Look carefully at what we have done -- the first V is now increased in size by 4 units above the base value, and the other letters (now capitalized) are increased 3 units above base value. This provides the layout style of SMALL CAPS. Also note that we have added a <b>...</b> tag to make the title stand out. And finally, because we are not using a header tag that carries a line break by default, we had to add a <p> tag above the title to force it to appear on a new line (we do not need one after because the next HTML is a <BLOCKQUOTE> that carries its own line break -- see lesson 13).
<b><I><font size=+1>"Nature raves savagely, threatening the lands"</font></I></b><br>
Before going on, we will use the font size tags to modify two other web pages in our work area. the page for Volcanic Places in the USA (file usa.html) and Research Project (file proj.html) both use <h2>...</h2> tags for the main title and <h3>...</h3> tags for sub section headings. Go into your text editor and change every occurrence of tags:
<h3>blah blah blah</h3>
<p> <font size=+1><b>blah blah blah</b></font><br>
Note that the <p> tag forces a one line break with preceding text above and the <br> tag forces a line break (no white space) to subsequent text.
Can you see the difference between using the <font> tags and the <h1>, <h2> , etc, tags for section titles? The formatting differences may be subtle, but it does offer you, the HTML author, alternatives for 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 Methods for Creating Headings|
In lesson 16, we introduced the tags for coloring text of the entire web page as well as the proper format for representing color values in HTML. You can also add an attribute to the <font> tag to color a selected portion of text using the hexidecimal codes or the 16 colors recognized by their names:
We will not go crazy with the color tags, but as an example, we will change the color of the VOLCANO WEB text we worked on above for the cover page. If you recall, we set the text color for the text of this page to yellow and we will override that color just for the title text:
<b><font size=+4 color=#FF66FF>V</font> <font size=+3 color=#DD0055>OLCANO WEB</font></b>
NOTE: The size and color attributes can reside together in a <font> tag. The effect here makes the "V" a brighter violet color and one size larger than the other letters.
Until HTML 3.0 you were out of luck if you needed to write mathematical expressions, chemical formulas, or other expressions with 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 tags is:
|Superscripts / Subscripts|
We will now use these tags for our Introduction page:
Volcanoes were important contributors to the early earth atmosphere by releasing gases such as nitrogen (N<sub>2</sub>), carbon dioxide (CO<sub>2</sub>), and ammonia (NH<sub>4</sub>).
Note that volcanic eruptions that occurred before historic times were several orders of magnitude larger (more than 1000 km<sup>3</sup> in erupted volume) than ones observed by humans.
Volume in km^3to
Volume in km<sup>3</sup>
The HTML 3.2 standards included the <font> tag to specify a particular screen font for text display. This may not work in all web browsers, so you may first want to try the font test.
The HTML for specifying a font face is:
<font FACE="font1,font2">some text
If a viewer's web browser supports the font FACE attribute and they have one of the listed fonts installed on their computer, then the text 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 a font face, you should select a face that is standard or be sure that the intended computers have any "exotic" fonts installed.
We will now modify the <font> tag for our title page so that the words "Volcano Web" appear in a different font:
<b><font face="Arial,Helvetica" size=+4 color=#FF66FF>V</font> <font face="Arial,Helvetica" size=+3 color=#DD0055>OLCANO WEB</font></b>
NOTE: We've included specifiers for the browser to choose Arial for Windows Helvetica for Macintosh and/or computers that do not have the Arial font installed.
Use this HTML with discretion! There is an art of use versus abuse of too many font styles!
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.
Here are two more styles that are now available in HTML 3.2 that may work in your web browser.
<u>This is Underline...</u>
This is Underline|
<strike>This is Strike-through...</strike>
And finally, here is a subtle point about text coloring that you may find useful someday. In lesson 16, we learned how to use the <body> tag to color the background, text, and link colors. If we were to color a block of text with the <font> tag, it would only affect the body text, and not the color of the hypertext links -- these keep the colors that are either the default blue or whatever is designated in the <body> tag.
<font color=red> It was a long time after the sad death of <a href="http://www.longhorn.org/sir/"> Sir Longhorn</a> that someone was able to recreate his formula.
<font color=red> It was a long time after the sad death of <a href="http://www.longhorn.org/sir/"> <font color=#228800>Sir Longhorn</font></a> that someone was able to recreate his formula.
Try experimenting with the <font>...</font> tags in your own web pages. See how they can work inside of the <hN>...</hN> tags too. Experiment with using different fonts, even the wild ones!
Look for places where you think you might need superscripts or subscripts. One example might be for footnotes -- you could number or character code them, and then each footnote could act as a hypertext link to a footnote (or jump to a separate page for end notes):
|... and after Linberger and Gordon's 1963 study12 on the effects of temperature on cheese maturation, Gange and Walters
(1964)13 as well as Colby
(1969)14 reached the same conclusion.
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 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 blah blah blah blah blah blah blah blah blah blah blah blah blah
12.Linberger and Gordon's experiments were controversial because of their radical techniques of temperature control.
13.Gange and Walters actually did not reach the same conclusion until their results had been verified by J.D. Smith. For more information see, Cheese Abstracts 1964, pp.234-239
14.Colby never received appropriate recognition for his pioneering work in the cheese field, and died penniless.
Huge Rulers? Hefty Rulers? Handy Rulers? More options for <hr>,
Writing HTML: Lesson 18: Spiffing Up Text
©1994-2002 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
Questions? Comments? Visit our feedback center
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.