Search the site








Hello World: Lesson 6 - Fun with Fonts

You have already been introduced to the <FONT> tag, as well as some basic means of formatting text such as italics, bold and underline. You now know how to add colours to text using the FONT tag, but it has other attributes that can be manipulated, such as size or typeface.

You can select the default size and typeface for fonts from your browser via an options menu. To change the size of text, you use the SIZE attribute to enlarge or decrease fonts. For example, <FONT SIZE=+3></FONT> will enlarge text by 3 points (as with the first letter in the above paragraph). Typing SIZE=-n will reduce the size of your font from the default by 1 to 7 points (the minimum and maximum for decreasing and increasing the size of fonts).

To switch from the default typeface which your browser uses to display text, you use the FACE attribute. The usual default is a variant of Times New Roman, but you may want to use, say, Arial, though this only works with Netscape Navigator 3.0 and Internet Explorer 2.0. To change the typeface, you would enter something like <FONT FACE="Arial">Arial font</FONT> (remember the double quotes). You can even suggest alternatives, in case your chosen font isn't available on the final system, such as <FONT FACE="Arial, Geneva">Arial or Geneva font</FONT>: Arial is a font common to PCs, Geneva to Macs. To use the FACE attribute, the font must be available to the user's system, which limits its use. However, there are plenty of times when you will want full control over design layout, and that includes use of fonts: so long as you stick to commonly available typefaces, you should be okay.

Finally, there are times when you may wish to employ preformatted text, say from a word processor. You must save the text as plain ASCII text, which cuts down most of the fancy effects you'll get from Word or WordPerfect, but it can be helful to perform some basic layout using line breaks or paragraphs without having to insert a tag every time you want to do something. Insert the text block you want to use between the <PRE></PRE> tags.

Exercise

<HTML>
<HEAD>
<TITLE>The Hello World Web Site - Fun with Fonts</TITLE>
</HEAD>

<BODY BGCOLOR=WHITE>
<HR><CENTER>
<H1 FONT COLOR="#9932CD">Hello World!</H1></CENTER></FONT>
<HR><P>

<H2><FONT SIZE=+3>F</FONT>un with <FONT SIZE=+3>F</FONT>onts</H2><P>
<BLOCKQUOTE>
<FONT SIZE=+3>C</FONT>creating a drop cap is fairly simple with the FONT SIZE tag, but there will also be times when you want to <FONT SIZE=+2>increase</FONT> and <FONT SIZE=-2>decrease</FONT> text for different effects within a paragraph.<P>
</BLOCKQUOTE><P ALIGN=CENTER>

<H2><FONT SIZE=+3>W</FONT>eb <FONT SIZE=+3>A</FONT>ddresses</H2><P>
<BLOCKQUOTE>
Navigating around the Web requires you to use URLs, or Universal Resource Locators, a piece of jargon hanging over from the days when the only people using the Web were rocket scientists and computer geeks. Really, an URL is no more than an address, similar to a postcode - and just as you don't need to be familiar with how postcodes work to send a letter, typing in the correct URL in your browser will take you to the right page whether or not you comprehend how it works.<P>

Web addresses usually start with http:// and end with .htm or .html, indicating that the means of transferring a file is via hypertext transfer protocol and the file to be transferred has been formatted with HTML. Typical URLs are http://www.yahoo.com or http://arts.falmouth.ac.uk/journalism/journalism.html. Even if this is too much for you, don't worry: most of the time you can get by on the Web simply by pointing to a hyperlink in a page and clicking on it.
</BLOCKQUOTE>

</BODY>
</HTML>

To see what your page should look like, click here. When you've finished, click on the Back button at the top of your browser to return to this page.

Lesson 1 Lesson 2 Lesson 3 Lesson 4
Lesson 5 Lesson 6 Lesson 7  

 


© Jason Whittaker 2000-04



You can order copies of the following books:
Web Production for Writers and Journalists in paperback.
The Internet: The Basics in paperback.
The Cyberspace Handbook in paperback.