Hints & Tips

Page 4

Here is an easy way to create an email link on your web page that will allow you to pre-populate the "subject" and "message body". In the script, replace the email address with your own, replace the subject with your own as well as the body message. All your website visitor needs to do is click the button and then click send when the email opens.

<form><input type="button" value="Email Me" onfiltered="location.href='mailto:you@yourdomain.com?subject=Your Subject&body=Message for the body'" style="font:11px verdana;color:#00CC00;background:#FFFFFF;"></form>

Hyperlink Description (will not work in older browsers)

Here is a useful option allowing you to give a brief description of what a particular hyperlink is for, or to help increase your keyword load on the page. By adding title="message here" to the anchor tag you can generate a similar effect to what happens with the alt tag in an image. 
Example:

<A HREF="http://www.yoursite.com/resources/index.php" title="tons and tons of webmaster resources you have to see">Text Here</a>

Horizontal Rules

Have you ever spent a long amount of time coding to create a line or a divider for some text? Well, why would you spend a long time doing that when HTML has an element for you to use? This article will show you how to apply a horizontal rule (aka a divider) to your website quickly and easily.

Even if you think that it's easy to add an extra table row for use as a horizontal rule, you shouldn't -- tables are meant to represent data and are not meant for styling your website. Perhaps you think it's easy to use a div as a horizontal rule or divider, but it can be easier! Say hello to the Horizontal Rule element; <hr>


Above is a Horizontal Rule in its natural beauty. Simple and boring. No problem for us -- we can use style sheets to style this boring line. Thanks to our good friend CSS, we can change the background color, set the height, border, background image, and so forth. 
The easiest way to give your HR a visual appeal is to give it a colored border. For example's sake, we'll give it a red border:

<hr style="border: 1px solid #f00;">

Here you can see that this creates a red line that is 2 pixels tall:


A line like the one above would be good to use when you want to visually divide some paragraphs. Using an HR tag is much more appropriate than using a div or a table row.

You can give an HR a background color, but only standard-compliant browsers will be able to see the color. Browsers like Internet Explorer are not complaint and will not show the color as it should. A good compliant browser is offered free at Mozilla.org.

In order to give a background color that is visible in IE, we will have to set a height of 3px. Even if we do that, we still have to deal with HR's natural gray border, which makes the red color look brown/orange.

<hr style="background-color:#f00;height:3px;">

Resulting line:


Normally, we would be able to remove the border by using "border: 0px;" in the style sheet, but a lot of browsers don't understand that as they should. What we can do instead is set the border to be a different color using border-color: #ff00ff

<hr style="background-color:#f00;height:3px;border-color:#ff00ff">


Some of you might catch your self using a simple IMG tag instead of any of the other methods mentioned. Well, using an image as a divider isn't fair to your visually impaired visitors that are using browsers that read the website to them. It wouldn't be too nice to hear a paragraph being read out loud and then hear "Image..." right in the middle of it. Even if you use an alt attribute in your image tag, you should consider using an HR with a background image:

<hr style="background-image: url(/hr.gif); height:6px;">

Here is the resulting line:


You can replace "/hr.gif" with the URL or path of your own image and you can edit the number in "height:6px" to reflect the height that you want.

Color Codes

#00ff00? What does that mean? Well, it's a color code! In this article, we'll take a look at color codes and how you can use them. 
A blank HTML document would have default font and text settings if it were opened in an Internet Explorer browser. The settings would look something like this if it were presented in an internal style sheet:

<style type="text/css">
font-face: Times New Roman;
color: #000000;
</style>

The first part, "font-face: Times New Roman" tells the browser that the web page is using a Times New Roman font and the second part, "color: #000000" tells the browser that the color of the text will be #000000... So what does "#000000" mean? Well, that's what this article is about.

The value "000000" is actually a set of three hexadecimal numbers, each digit represents a value for Red, Green, and Blue respectively; RRGGBB.

These hexadecimal codes can be referred to as a triplet, or a group of three hexadecimal numbers.

Each digit in the hexadecimal system is a value from 0 to F. The hexadecimal color system counts by 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, with "0" being null value, and "F" being highest value of fifteen. The following table will help you understand the system a little easier:

Decimal 0 1 3 4 5 6 7 8 9 10 11 12 13 14  15
Hexadecimal 00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F
Decimal 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Hexadecimal 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F

The largest value you can assign to one of the values of red, green or blue is FF, which is 255 in the normal decimal system. If we assign a hex color value of "#FF0000" this would display the most amount of red as possible. The code's value has the green and blue values set to null and so there would be no green or blue color present.

There are only 216 colors that are considered "safe" for web browsers. These browser-safe colors should only contain the following values: 00, 33, 66, 99, CC, and FF. You can view a list of all the safe colors that you can use on your web page by visiting the color reference chart linked at the end of this article.

You can add color to your own website easily. Let's say you want your text to be blue; all you would have to do is put this into your header:

<style type="text/css">
body
{
color : #0000FF;
}
</style>

Now that you know what that color code actually is, you can replace it with any color you want! Find the color you want with our Color Reference Chart.


[ Hints & Tips 1 | Hints & Tips 2 | Hints & Tips 3 | Hints & Tips 4 | Hints & Tips 5 ]

  

[ About Me | Site Legal Info | Site Design | CSS Coding ]
[ JavaScripts | Hints & Tips | BackGrounds | Misc. Images ]
[ Templates | Logo Page | Special Characters | Color Chart ]
[ Contact Us! | Awards Won | Links ]
[ Home | Site Map ]

 

Go to Top


Webmaster & Owner: Anita Eberline
No part may be reproduced without prior permission by Anita Eberline