How to create interest with size and font changes.By default, browsers will choose a particular size and font style for the text in HTML documents. If you want to choose your own, you can.
Headlines can be created with the headline tag, <H>, which is given with a number from 1-6 to indicate size (<H1> for the largest to <H6> for the smallest). The headline tag will also leave a line space after it.
The FONT tag has many applications. You can change font face, color, and size all within this tag. These attributes are typed inside the font tag with an equal sign followed by the content inside of quotes. For example: <FONT FACE="arial" SIZE="+2" COLOR="#0000ff"> The order of these attributes doesn't matter, and it doesn't matter if you use upper or lower case either, although setting the categories off with capitalizing can help you read your code later.
Font size can be controlled in a number of ways, but the system I use, which is relative sizing, is one we will do now. In this system, "3" is the normal, or default size. "+1" is larger, "+2" is larger still, etc. "2" is smaller, followed by "-1", and "-2".
Fonts can also be manipulated with the BOLD tag: <STRONG> or <B>. And the italic, or EMPHASIS tag: <EM> or <I>.
There are hundreds of different font faces, and it is hard not to choose your favorite. However, it is important that you choose one that other visitors probably have, or no one will see your fancy font! (Their browser will just go to the default font face if yours isn't on their computer.) I ask my students to stick with four fonts: "Times New Roman", a serif font; "Arial", a sans serif font; "Courier", a mono-spaced font like a typewritter, and "Comic Sans Ms", something a little fancier. By adjusting size and adding the BOLD or EMPHASIS tags, these fonts can have a lot of variety!
Another caution: We are starting to get a lot of tags now. Be sure that all tags are "closed." And be sure that you close tags in the reverse order that you opened them in!
For example, if want a line of text to be both BOLD and italic
do this: <B><I>This text is both BOLD and italic.</I></B>
not this: <B><I>This text is both BOLD and italic.</B></I>4th Assignment:
Change font size, face, and color to add interest and variety to your page. Be careful to close all FONT, BOLD, and EMPHASIS tags!Here are some examples of font manipulations in Joe's web page:
<HTML>
<HEAD>
<META NAME="AUTHOR" CONTENT="JOE B. A-6">
<TITLE>JOE'S WEB PAGE</TITLE>
</HEAD>
<BODY TEXT="#0033ff" BGCOLOR="#33ff33">
<Blockquote>
<Font Face="Times New Roman" Color="purple"><i>Site under construction.</i></Font></P>
<Font Face="Arial" Size="+3">Joe's Page</Font></P>
<p><b><Font Size="+1"><Font face="comic sans ms" color="red" >Hi my name is Joe.</Font></Font><BR>
I am 11 years old and I'm going to tell you some things about me. I like <H1>Sports</H1> <H2>Camping</H2> <H3>Fishing</H3> and <H4>BMX.</H4>
<Font face="arial" size="3"><b>Some of my other hobbies are <i>building models, writing letters</i>, and <i>skateboarding</i>.<img src="disney/plut03.gif"> </font></b>
</p></Blockquote>
</body>
</html>
Note that a number of font characteristics can be placed in one font tag. It only takes one </font> tag to close.
(If you want different attributes to close at different places, place them in different font tags, and close each separately.) Copyright ©2000, Marilyn Huffman. All rights reserved.