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