(tutorial)WANT SOME COLOR TEXT

So, You Want Some Color Text Huh?

Section 1: Changing Full-Page Text Colors

You have the ability to change full-page text colors over four levels:


<BLOCKQUOTE>
<TEXT="######"> -- This denotes the full-page text color.

<LINK="######"> -- This denotes the color of the links on your page.

<ALINK="######"> -- This denotes the color the link will flash when clicked upon.

<VLINK="######"> -- This denotes the colors of the links after they have been visited.
</BLOCKQUOTE>
These commands come right after the <TITLE> commands. Again, in that position they affect everything on the page. Also... place them all together inside the same command along with any background commands. Something like this:


<BLOCKQUOTE>
< BODY BGCOLOR="######" TEXT="######" LINK="######" VLINK="######">
</BLOCKQUOTE>
Please note: When you write these codes, you can write them with a # sign in front of the hex code or not. It used to be that that was required, but not any more. I still use it just because I started that way. You may want to just go with the six-digit code. Also make sure to place a space between each command and be sure to enclose it in quotation marks, like so:


<BLOCKQUOTE>
<VLINK="#FFFFFF">
</BLOCKQUOTE>
Section 2: Changing Specific Word Color

But I only want to change one word's color!
You'll use a color (hex) code to do the trick. Follow this formula:


<BLOCKQUOTE>
<FONT COLOR="######">text text text text text</FONT>
</BLOCKQUOTE>
It's a pain in the you-know-where, but it gets the job done. It works with all H commands and text size commands. Basically, if it's text, it will work.

Using CSS to Change Text Colors

A quick intro to CSS is in order, so let's describe it a bit. CSS is used to define different elements on your web page. These elements include text colors, link colors, page background, tables, forms--just about every aspect of the style of the web page. You can use CSS inline, much like the HTML above, or you can, more preferably, include theh style sheet within the HEAD tags on your page, as in this example:


<BLOCKQUOTE>
<STYLE type=text/css>
A:link {
COLOR: red /*The color of the link*/
}
A:visited {
COLOR: #800080 /*The color of the visited link*/
}
A:hover {
COLOR: green /*The color of the mouseover or 'hover' link*/
}
BODY { COLOR: #800080 /*The color of all the other text within the body of the page*/
{
</STYLE>
</BLOCKQUOTE>
Alternately, you can include the CSS that is between the STYLE tags above, and save it in a file that you could call "basic.css" which would be placed in the root directory of your website. You would then refer to that style sheet by using a link that goes between the HEAD tags in your web page, like this:


<BLOCKQUOTE>
<link type="text/css" rel="stylesheet" href="basic.css">
</BLOCKQUOTE>
As you can see in the example above, you can refer to the colors using traditional color names, or hex codes as described above.
The use of CSS is vastly superior to using inline FONT tags and such, as it separates the content of your site from the style of your site, simplifying the process as you create more pages or change the style of elements. If you are using an external style sheet, you can make the change once in the style sheet, and it will be applied to your entire site. If you choose to include the style sheet itself within the HEAD tags as shown above, then you will have to make those changes on every page on your site.

Creating Colored Links

Heres The Pattern:


<BLOCKQUOTE>
<A HREF="URL Here"><FONT COLOR="Hex Color Here">Text Here</FONT></A>
</BLOCKQUOTE>
For The Hex Colors Just Click Here


Creating Links To Other Pages

Creating A Hypertext Link

Today you will learn only one basic technique: How to create a (hyper) link to another page. It's a set tag format that's part of the Hyper Text Markup Language (HTML) like any of the others you may have seen. Once you learn the format, you can make as many links as you want to any other page you want.

Now an example: What is below would create a link to Friendstertalk Homepage.



<BLOCKQUOTE>
<A HREF="http://www.friendstertalk">Friendstertalk</A>
</BLOCKQUOTE>
Here's What's Happening

♥A stands for Anchor. It begins the link to another page.

♥HREF stands for Hypertext REFerence. That's a nice, short way of saying to the browser, "This is where the link is going to go."

♥http://www.friendstertalk.com is the FULL ADDRESS of the link. Also notice that the address has an equal sign in front of it and is enclosed in quotes. Why? Because it's an attribute of the Anchor tag, a command inside of a command.

♥Where it reads "Friendstertalk" is where you write the text you want to appear on the page. What is in that space will appear on the page for the viewer to click. So, write something that denotes the link.

♥/A ends the entire link command.


What To Write For The Link?

There are a couple different schools of thought on this. One suggests that what you write for links should be quite blatant. This includes text like "Click here for this" or "Here's a link to...". The other states that since the hypertext links will be blue (or whatever color they're set to), that the links should be just another word in the text set up as a link.

In reality it depends what you're doing. If you're building a menu bar down the side of your page (like down the left hand side of this page) then the last thing you want is for every single link to say "Click here for HTML Primer 1 - an introduction" - simply because your menu would be as wide as your page...

However, for accessibility reasons you should try to make sure your links make sense out of context - diasbled people navigating your page can jump around hyperlinks using the "tab" key (there should be one on the left of your keyboard too). If the have skipped directly to your hyperlink which says "here" then they won't know what it's about. If they skip to one that says "HTML Primer: Introduction" then they know whether or not they want to click.



--------------------------------------------------------------------------------

E-Mail Links From Your Page

This is what's known as a mailto: command. It follows the same coding scheme as the hypertext link above. What this format does is place blue wording on the screen that people can click to send you a piece of e-mail.

Here's the pattern:


<BLOCKQUOTE>
<A HREF="mailto:friendstertalk@yahoo.com">Click Here To Write Me</A>
</BLOCKQUOTE>
Notice it's the same format as a link except in a link you write "mailto:" in place of the http:// and your e-mail address in place of the page address. Yes, you still need the </A> tag at the end. Please notice there is NO SPACE between the colon and the e-mail address.





However, please be very careful when using this, for two reasons:

1.) If the person only has a web based email account, and hasn't configured an email program on their computer (e.g. if you use Hotmail or Gmail instead of Microsoft Outlook) then it will open their email program for the first time and try to walk them through setting it up. This isn't a good idea if they're new to computers...


2.) There are now little programs called 'bots' which wander round the internet looking for email addresses to send spam (junk emails) to. If you don't want to receive them, then one part of this is not publishing your address on the internet. So think long and hard before you use a mailto!