WELCOME FROM INFORMATION CENTER

Home Circuit Diagrams Basic Html 555 IC & Circuit Songs Photo Computer Information

Changing the Default Text Color

How to change the default font color on your page

Home | HTML | Beginner | Advanced | List

Okay, to change your default text color in your HTML page, you will need to find your body tag. Now, look for the phrase text="" somewhere after the word BODY. You may have something like this:

You may also see a weird number/letter combination, like this:

Of course, you may not see either of these, or you may be creating the page from scratch. If you don't have the extra command yet, add it to your BODY tag like one of the examples above. If you have other commands, add this one onto the end, leaving a space after the previous command, like this:

Now, if you'd like to change the color, replace the black between the quote marks with a color name or hex code. For a list of some common color names and hex codes, click here.

So, if you want to change the text color to red, you could use one of the following:

Using a color name:

Or using a hex code:

Now, any text you type inside the body tags will show up as your new color in the web browser. So, now you may want to change the link color as well. Well, that's coming up in the next section: Changing the Link Color.

Changing the Link Color

How to change the link color on your page

Home | HTML | Beginner | Advanced | List

If you want to change the link color on your page, you will need to begin by finding the <BODY> tag. Now look for a command after the word BODY that says link="color". It would look like this:

Or the tag might have some other commands as well:

You may also just have the word BODY with nothing else there. If so, add the command after the word BODY, with a space between the two, like this:

Now, to change the link color, you replace the word blue inside the quotes with a different color name or hex code. For a list of some common color names and hex codes, click here.

So, if you would like to change the link color to red, you would type the following:

Or using the hex code:

Now, all the links on your page will be colored red rather than blue. You can also do the same things for active and visited links by adding or editing their commands. The commands are:

alink="color" For the active link color
vlink="color" For the visited link color

You might have:

To change the other colors, do the same as you did for the link color. If you need to add the commands, go ahead. Just place a space between each command, and add your colors!

Now we are going to move on to the background color command, which is very similar to the link commands we just finished. So, let's go on to Using a Background Color.

Using a Background Color

Add or change the background color on your page

Home | HTML | Beginner | Advanced | List

If you want to use a background color on your page, you will need to begin by finding the <BODY> tag. Once you have found the tag, look for a command after the word BODY that says bgcolor="color" . It may look like this:

Or the tag may have more commands inside and use hex codes, like this:

And of course, the command may not be there at all. If this is the case, add it by placing a space after the word BODY and then type the command, like this:

Or if you don't have any other commands, just add it in like this:

To change the background color, replace the word gray inside the quote marks with a color name or a color hex code. For a list of some common color names and hex codes, click here.

So, if you wanted to change the background color to green, you would type:

Or you could use the hex code for green:

After doing this, your page will have a green background. Beautiful! Now just use any color you like in the command, and add color your pages!

All right, we only have one more body tag section left! So let's go on to the next section: Using a Background Image.

Using a Background Image

How to add a background image to your page

Home | HTML | Beginner | Advanced | List

To add a background image to your page, you will need to locate the <BODY> tag in your document. When you have found it, you may see just the word BODY, or you may see a string of commands afterward. It may look something like this:

What we are going to do is add a command after the word BODY. So, go to the end of the word BODY, skip a space, and type the following:

background=" "

Now your body tag should look something like this (and may have more commands):

Now, we are going to place the url of the image inside the quotation marks. So, if the image I want to use is at http://www.mysite.com/image1.gif , I would insert this into the command, like this:

Your image should have the file extension .gif or .jpg . If not, you will want to covert it to one of these file types. One program that will do this is Paint Shop Pro, which is available as shareware from JASC.

Now, if your image file is located in the same directory as your html file, you can just type the filename of the image rather than the full url. So, if we want image2.gif to be the background image, and it is in the same directory as the page we are editing, we can type the command this way:

Now, as a real example, I will use an image from my server as a background on a page. The name of the image is "next.jpg". The url for the image is http://www.pageresource.com/images/next.jpg . So, to use this as a background, I would type in this:

Now, if I put an html file in my "images" directory, I could use the image by typing in just the filename, like this:

Okay, now you can use your own image as a background....so put a picture of yourself as a background. That's always kind of fun......

Well then, let's move on to the next section, Resizing Images.

Resizing Images

How to resize your images

Home | HTML | Beginner | Advanced | List

Okay, you have an image you want to use, but it's just not the right size to go where you want it to go. Maybe the image takes up the whole screen, or maybe you wanted a larger version of the image on the screen. Well, you can resize the image by adding width and height commands to your image tag. Let's take a look at an example. I have an image called "next.jpg". Well, suppose I want to make it smaller. All I need to do is know the original width and height of my image. The width and height are usually written in pixels. A typical screen is about 800 pixels wide and 600 pixels in height (though this varies with different video cards and moniters). My image turns out to be 106 pixels wide and 65 pixels in height. The picture looks like this:

So, to change the size of the image, I'm going to add these two commands inside the image tag:

width=" " and
height=" "

I'm going to place the commands after the initial command, IMG src="next.jpg" mce_src="next.jpg". The tag will now look like this:

Now, to make the image smaller, I'm going to place numbers inside those quotation marks. Well, let's say I wanted it to be 75 pixels wide and 40 pixels high. I would then place these numbers into the commands, like this:

Now, when I reload my page, the picture will be the new height and width I specified. Here's what it would look like:

Now, to make the image larger, we will just insert larger numbers for the width and height:

Now the image looks like this:

As you can see, the images became somewhat distorted when I resized them. One reason for this is that I didn't keep the aspect ratio the same. Since the image was originally 106x65, I would have to decide on a width, and then find a height that would keep the aspect ratio of 106/65. When you calculate 106/65, you get about 1.63 . So, if you want to make the width 75, you need to find the height that will make the ratio as close as possible to 1.63 . You can guess at it for awhile, or if you like solving equations, here it is:

75/height = 1.63

Now take the answer and round up or down. In this case, it comes out to about 46.0123 . So, I would use 46 as the height:

Now it looks like this:

If you don't want to deal with math all the time (like me), you can also resize it with a paint or image program (which will do the calculations for you) and upload the new version of the picture to your server. I usually use my image program to do this, just for the ease of use. Besides, if I'm making the image smaller, the paint program will make the file size smaller.

All right, now we will move on to the next section, Using an Image as a Link. (And there won't be anything about aspect ratios or mathematical equations!)

Using an Image as a Link

How to link an image

Home | HTML | Beginner | Advanced | List

To use an image as a link, you will have to use two things you have already learned.

How to create a link.
How to add an image to the page.

Now, remember my trusty old picture, "next.jpg"? I have been using it at the bottom of each page as a link to the next section. So, what did I do? Well, first, you must create a link to the place you want people to go when they click on the picture. So, if you wanted to link to our main page, you would go ahead and type the opening link tag, like this:

Now, don't type any text, and don't close the tag just yet. What we are going to do is place the image tag right after the opening link tag. The image we are using here is "next.jpg". So, you would type the following:

OK, now we are going to close the link tag at the end of the image tag, so that the image tag is between the opening and closing link tags, like this:

Now that the image is between the link tags, it will operate the same way as a normal link, but now it is a visual image. Here is what the above code would produce:

Move the mouse over the image, and it will turn into the little pointing hand. If you click on the image, you will end up all the way back at our main page.

Well, that's good, but what's with the border around the image? Well, the border just seems to be added by default on most browsers. To get rid of it, add this command to the image tag:

border="0"

Here is an example:

Now, the picture will be a link, and you won't have the extra border around the sides:

You can also make the border larger in the same way, just use a larger number in there, for instance:

border="5"

The drawback to the border is that it insists on being the color of your link color, and sometimes this isn't the color you want to use. The only way I know around it is to edit the actual image to where it has the border you want, and then set the border="0" in your image tag. Oh, well.

So, let's move on to the next section, Image Alignment and Wrapping Text.

Image Alignment/Wrapping Text

How to wrap text around an image

Home | HTML | Beginner | Advanced | List

To allow text to wrap around an image, you just need to add one of these commands to the image tag:

align="left"
align="right"

So, the image tag would look like this:

Now just type in your text and it will wrap around the image, rather than jumping to the bottom of the image. Here is an example.

Hmmm....I think this image is in the way... 
<IMG src="../images/next.jpg" mce_src="../images/next.jpg" align="left">
Hello, this text should wrap around 
this image like this. 
I'll just keep on writing and 
writing and writing and writing 
until I'm tired of writing....

This will give you the following:

Hmmm....I think this image is in the way...
Hello, this text should wrap around
this image like this.
I'll just keep on writing and
writing and writing and writing
until I'm tired of writing....

If you write across the entire screen, you won't need all those line breaks. I just used them to keep the example from being really long. If you take out the line breaks, the text will go the rest of the way across the screen before wrapping around. You can also do this with the align="right" command. The image will be on the right and your text will wrap around the left. Isn't this great?

Well then, let's move on to the next section: Using Image "alt" Commands.

Using Image "alt" Commands

An alternative to the picture

Home | HTML | Beginner | Advanced | List

Okay, the image alt command is used to display text in the case someone visits your page with a browser that can't show images, or in the case they have image loading turned off to so pages will load faster. If you have images as links, this is a handy way to let people know what the image was supposed to do. This is the alt command:

alt="something you want to write"

Place this inside the image tag:

You place this command inside the image tag for the image you want to display alternate text for. One image I do this with is my "next.jpg" image at the bottom of these pages. I place the text "next" in the alt command, and that is what will be seen if someone sees the page with no images. Here is the example:

To see this work, you will probably have to disable image loading and reload this page. You can then scroll down to the bottom right and see the word "next" where the image used to be. Of course, if you have a really new browser, you can move your mouse over the image and it will display the alt text right there for you.

So, let's move on once again. The next section is: Linking Within a Single Page.

Linking Within a Single Page

Jump to the top, middle, or any other place

Home | HTML | Beginner | Advanced | List

Okay, lets say you have one page that is pretty long. Maybe you would like to give someone a way back to the top of the page when they are at the bottom. Or maybe you want to divide it into sections and use a table of contents at the top. Well, the way to do this is to use a named anchor, which is a specific area of your page you want to make a link to. You could link to any part of the page, but for now, let's say you want to create a link to the top of your page. To do this, go to the top of the body section (right after the body tag). Now type the following tag:

You can place any name you wish inside the quotes. This just makes it easy to see where we are going to end up. Now, go anywhere between the body tags and type this link:

If you click on this link, you will be sent back to the top of the page. You can try one I made on this page by clicking on the link below:

The # sign is there to let the browser know the destination is a named anchor within this page. So, if you create an anchor named "cool", you link to that anchor by using "#cool", like this:

<A NAME="cool"></A> -----The anchor name
<A href="#cool" mce_href="#cool">To the Cool Section of this page</A> -----Linking to the named section

You can place a named anchor anyplace on your page. You can link to it from any other part of the page. You can place one at the third paragraph, the bottom, the top, the 500th word..... It can make navigating some pages a whole lot easier.

So, let's move on to the next section, The Email Link.

The E-mail Link

How to create an email link

Home | HTML | Beginner | Advanced | List

To create an e-mail link on your page, all you need to do is use the standard link tag. The trick is in what you use as the address of the link. To force the browser to read it as an e-mail link, you use "mailto:" rather than "http://" to begin the address. After the "mailto:", you will use your e-mail address rather than a web address, like this:

Yes, all you need to do is replace the your_email_address with .....your e-mail address. Here is an example, to create an email link to myself, I would place john@pageresource.com in that space, like this:

Here is the resulting link:

Give me some mail!

If you click on the link, your browser will bring up a window for you to send me e-mail, with my e-mail address already filled in. Send me whatever you want- maybe your joke of the day or something!

You can also create the subject of the message so the viewer doesn't have to fill in something in the subject line. You do this by adding a "?" at the end of your e-mail address and then your subject, like this:

The example link is below, notice that when you click it, the subject field of your email message is already filled in with "Hey John".

Mail Me!

Now, isn't e-mail fun?

All right, let's go to the next section, More on the E-mail Link.

The E-mail Link: More

More tricks for the email link

Home | HTML | Beginner | Advanced | List

In the last section, we saw how to add the subject to a message through the e-mail link. It was done using a "question mark" followed by subject= and then the subject:

<A href="mailto:you@you.com?subject=Hi" mce_href="mailto:you@you.com?subject=Hi">Mail Me</A>

On top of adding the subject, there are a couple of extras you can also add. You can add a carbon copy recipient, a blind carbon copy recipient, or use a combination of the subject with either or both of these.

To send a carbon copy, you add the cc= command after the question mark, followed by the e-mail address of the person you want to send the carbon copy to:

<A href="mailto:you@you.com?cc=friend@friend.com" mce_href="mailto:you@you.com?cc=friend@friend.com"> Mail Me</A>

The same goes for a blind carbon copy, except you use the bcc= command instead:

<A href="mailto:you@you.com?bcc=friend@friend.com" mce_href="mailto:you@you.com?bcc=friend@friend.com"> Mail Me</A>

With either of these, you can send the copies to multiple addresses by separating them with commas:

<A HREF="mailto:you@you.com?bcc=friend@friend.com, other@other.com"> Mail Me</A>

Now, if you want to combine more than one of these commands after the question mark, you add them in using an "&" sign at the end of the first command. For instance, if you want a subject and a blind carbon copy, it would look like this:

<A href="mailto:you@you.com?subject=Hi&bcc=friend@friend.com" mce_href="mailto:you@you.com?subject=Hi&bcc=friend@friend.com"> Mail Me</A>

If you want all three, use the "&" sign again:

<A href="mailto:you@you.com?subject=Hi&bcc=friend@friend.com&cc=other@other.com" mce_href="mailto:you@you.com?subject=Hi&bcc=friend@friend.com&cc=other@other.com"> Mail Me</A>

With that, you can have some more fun with your e-mail links-- and if you run a site with a partner you can both get an e-mail when someone uses that link.

All right, let's go to the next section, Congrats!.

Congratulations!

Way to go!

Home | HTML | Beginner | Advanced | List

Congratulations, you have completed all the basic HTML tutorials! And as a reward, I offer this page with a gold background......Well, it's at least a new color......

You can now create a totally cool web page! You can stop here if this is all you need. Of course, feel free to move on to our advanced tutorials which include how to use forms, tables, and even frames.....

So, let's go back to the old grind, and take a look at Using Forms.

Back To Main Page