So, you want to make a Web Page!
Lesson 4

adapted from Joe Barta's tutorials at- PageTutor.com

title


If you don't already have one, be sure to create a new folder titled Lesson_04 in your HTML folder

Create a really cool page (don't forget the title)

<html> 
<head> 
<title>Lesson 4</title> 
</head> 
<body>
something really cool 
</body> 
</html>

A very useful type of text effect is the mono-spaced font, or Typewriter Text.

 

<body> 
<tt>something really cool</tt> 

</body> 
 

Something really cool

 

Save as: Lesson_04.html in your HTML/Lesson_04 folder

When using a mono-space font (Typewriter Text) each letter uses the same amount of horizontal space...

This is regular type ->

iiiiiiiiii
oooooooooo
mmmmmmmmmm

 

This is monospaced type ->

iiiiiiiiii
oooooooooo
mmmmmmmmmm


We can change the font size too... It's pretty easy!

First, remove the <tt> tags and add some <font> tags...

<body> 

Something really <font>cool</font> 

</body> 

Then specify a size attribute.

<body> 

Something really <font size="6">cool</font> 

</body> 

Something really cool

 

Fonts come in 7 sizes:

teeny tiny

small

regular

extra medium

large

real big &

yelling!

1

2

3

4

5

6

7

"TAG / ATTRIBUTE" INFO - VERY IMPORTANT!!!

Two things I want to discuss now...

First, a <tag> tells the browser to do something. An attribute goes inside the <tag> and tells the browser how to do it.

The second point is about "defaults". As you probably know, the "default value" is a value that the browser assumes if you have not told it otherwise. A good example is the font size. The default font size is 3 (usually). If you say nothing it will be 3. If you make faces at your computer it will still be 3.

Every browser has a default font setting - font name, size and color. Unless you have messed with it, the default is probably Times New Roman or Verdana 12pt (which translates into 3 for our purposes) and it's black.

Of course we can specify font names other than the defaults. Like arial

<body> 

Something really <font face="arial">cool</font> 

</body> 

Something really cool

 

The font will only display if your visitor has that font installed on their computer.

Let me repeat... If the person looking at the page doesn't have installed on their computer the font you specify, then they will only see the default font. So be very judicious in your use of fonts. Arial and Verdana are pretty widely distributed with Windows. So is Impact. You can hedge your bets a little by specifying more than one font. (Yes! You can do that!). Just do something like this...

<font face="arial,helvetica,lucida sans">Hidee Ho</font> 

For lunkheads like me that might not understand that right away, here's what's happening... The browser looks for arial. If it finds it, it uses it. If not, it goes on to helvetica. If it can't find that, it looks for lucida sans. And if it can't find that it uses the default font.

What are some common fonts that are on *most* computers and are pretty safe bets?

Arial
Arial Black
Arial Narrow
Bookman Old Style
Century Gothic

    

Comic Sans MS
Courier New
Georgia
Impact

    

Lucida Console
Tahoma
Times New Roman
Trebuchet MS
Verdana

     

FAQ: Can I somehow embed a font or force a download of my font so my visitors automatically get the font I'm using?

A: For all practical purposes... no. The only way that they will see the font you specify is if they have that font on their system. There are some emerging web technologies that actually do embed special fonts in a web page, but these are very rarely used, not very widely supported and generally a pain in the butt. You can always offer a simple link to your font. Your visitors can download & install it if they wish.

Save as: Lesson_04.html in your HTML/Lesson_04 folder

On to Lesson 5