|
|
| Home | Old Issues | Examples |
Welcome to Nathsite's weekly 'Around the Web in Eighty Kilobytes', a 20-part free guide to building a website of your own, and using the web well.
To stop getting ATWI80KB's, send an empty email to atwi80kb@homepage.com with 'NO MORE THINGIES' as the subject. To look at examples and previous ATWI80KB's, go to http://atwi80kb.homepage.com
AROUND THE WEB IN EIGHTY KILOBYTES 1.9 - 1.10
ATWI80KB 5
May 5, 2000
1) The <font> Tag
2) Colors
Example
1) THE <font> TAG
The <font> tag is one of the most fun tags to use. With it, you can do three important things:
To change color, use the 'color' attribute:
- Change Text Color
- Change Text Size
- Change Font
<font color="#FF0000">Red stuff</font>
"#FF0000" means red. Instead of writing a tough-to-remember code, you could use keywords like "red", "blue", "white", "black", "green", "yellow" or "gray" or any other 'standard' color.
eg. <font color="red">Red stuff</font>
Some browsers don't support this, so here are some common codes (there are 216 reasonably common ones):
Red #FF0000
Brown #AA0000
Blue #0000FF
Navy blue #0000AA
Cyan #00FFFF
Teal #00AAAA
Lime #00FF00
Dark Green #00AA00
Lt. Gray #CCCCCC
Dk. Gray #999999
White #FFFFFF
Black #000000
Lt. Blue #CCCCFF
Lt. Green #CCFFCC
Pink #FFCCCC
You don't need to learn how this code (the hexadecimal system) works, but soon you'll be able to learn at the ATWI80KB website.
To change size, use the size attribute:
<font size=4>Blah blah</font>
The size can anything from 1 to 7. To increase the size, type:
<font size=+1>Blah blah the Second</font>
You can increase or reduce the font size until it reaches 1 or 7.
<font size=-2>Blah blah the Third</font>
Another way to change size is to use headings. There are 6 heading tags - <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<h1>This is the largest heading.</h1>
<h6>This is the smallest heading.</h6>
To change the font, use:
<font face="______">
eg. <font face="Arial">
It's best to use:
Arial
To be safe, specify more than one font:
Verdana
Times New Roman
Impact
Courier New
Comic Sans MS
<font face="Arial, Verdana">
This means that if the browser can't find Arial it looks like Verdana. You can specify as many fonts as you like.
You can set font to fixed-width or typewritten text (usually Courier New) with the <tt> tag. That means all characters are equally wide.
2) COLORS
If your browser's default background is grey or something, your pages might not look too good yet. Problem solved - today you'll learn how to put color into HTML documents. Making a background color for a document is quite simple - you just have to modify the body tag a bit:
<body bgcolor="#FFFFFF">
Look at this:
<body text="#FF0000" link="#0000FF" alink="#00FFFF" vlink="#00FF00">
Here's an English translation:
ATTRIBUTE EFFECT text Text color link Hyperlink color alink Active link color vlink Visited link color
NOTE: It's a good idea to set bgcolor to "#FFFFFF" for a white background, because white's not always default. The '0's are *zeros*, not capital 'o's.
And remember: even if different attributes are entered in a tag, the closing tag remains the same.
eg. <body bgcolor="#FF0FF0"> is closed by </body>
EXAMPLE
<html>
<head>
<title>Believe in the Green Shoe</title>
</head>
<body bgcolor="#CCFFCC" text="#0000CC" link="#000000" alink="#FFFFFF" vlink="#003333">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<FONT face="Courier, Courier New">
<FONT color="#000000">H</FONT>
<FONT size="+1" color="#a00000">T</FONT>
<FONT size="+2" color="#a0a000">M</FONT>
<FONT size="+3" color="#a0a0a0">L</FONT> is NOT boring.
</FONT>
</body>
</html>
See you in a week!
Aniruddh Nath
Email questions to atwi80kb@homepage.com - I'll reply if I have time. I might write stuff from your email in later ATWI80KB's.
NOTE: I'm not responsible for any damage done to your computer because of this tutorial.